ng-click 后 Angular 模型不更新

Question

ng-repeat 模型在用户单击提交后不会更新，它只会在刷新时显示，我查看了类似的 problem，但我无法连接这些点。一位用户建议我做一个 ng-init，但我认为我做得不对。

使用 ng-init 它不显示任何数据，没有 ng-init 并删除它显示帖子的角度函数，但在单击后不更新模型。

注意：尖括号被替换，因为 laravel Blade 不喜欢它

html

    <div id="mypost" class="col-md-8 panel-default" ng-init="getPosts()" ng-repeat="post in myposts">
        <div id="eli-style-heading" class="panel-heading"><% post.title %></div>
            <div class="panel-body panel">
                <figure>
                    <p> <% post.body %></p>

                </figure>
            </div>


    </div>

Main.js

// this doens't show posts when i use ng-init
$scope.getPosts = function(){

    $http.get('/auth/posts').then(function(data){
        $scope.myposts = data.data;
    });



};

// this shows posts without ng-init but doesn't update when a user adds data


$http.get('/auth/posts').then(function(data){
    $scope.myposts = data.data;
});

再次更新

网络错误

PostController.php

public function storePost(Request $request)
{
    $data = request()->validate([
     'title' => 'required|max:120',
     'body' => 'required|max:1000'
    ]);

    $data['user_id'] = auth()->user()->id;

    $post = Post::create($data);


    // return redirect('/home')->withMessage('A new post was created.');

    return Response::json(array('success' => true));
}

Answer 1

不要使用 ng-init，除非您将 ng-repeat 的特殊属性（如 $last 或 $even 用于嵌套的 ng-repeat ）别名化。如果您希望一个函数立即触发，只需在它定义的控制器或服务/工厂中调用它。

https://jsfiddle.net/xf20j22u/1/

var app = angular.module('eli', []);

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

app.controller('mainCtrl', function($scope, $http, $timeout){
	$scope.posts = {};
  $scope.myposts = [{title:"titillating title",body:"Hot boddy"}]
	$scope.addPost = function(){
  
		$http.post('/auth/post', {
			title: $scope.post.title,
			body: $scope.post.body

		}).then(function(data, status, headers, config){
			$scope.posts.push(data);	
		
		});

	};

	$scope.getPosts = function(){

		$timeout(function(){
          debugger;
          $scope.myposts = [{title:"something new",body:"It's my body"}]
        },3000)
		//$http.get('/auth/posts').then(function(data){
		//	$scope.myposts = data.data;
		//	$scope.$apply();
		//});
	};
  $scope.getPosts();



});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<div  ng-app="eli" ng-controller="mainCtrl">
  
  <div id="mypost" class="col-md-8 panel-default" ng-repeat="post in myposts">
    <div id="eli-style-heading" class="panel-heading">
      <% post.title %>
    </div>
    <div class="panel-body panel">
      <figure>
        <p>
          <% post.body %>
        </p>

      </figure>
    </div>
  </div>
</div>

上面的工作版本可以用 $http 替换 $timeout 他们都为你调用 $apply 所以不要再调用它（只需要调用 $apply 如果你自己编写异步工作的东西然后更新模型和你想要触发视图刷新，角度事件处理程序和服务会为您完成）

Answer 2

在另一个@Sorikairo 的帮助下，我们能够解决问题，我不想发布答案，因为我很懒，但我需要帮助那些在使用 laravel 时遇到非常类似问题的人。这是更新后的代码。

Main.js

var app = angular.module('eli', []);

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

app.controller('mainCtrl', ['$scope', '$http', function($scope, $http){


    $scope.posts = {};

    $scope.addPost = function(){

        $http.post('/auth/post', {
            title: $scope.post.title,
            body: $scope.post.body

        }).then(function(data, status, headers, config){
            console.log(data);  
            $scope.myposts.push(data.data);


        });

        $scope.post.title = '';
        $scope.post.body = '';

    };

    $scope.getPosts = function(){

        $http.get('/auth/posts').then(function(data){
            $scope.myposts = data.data;
        }).then(function(data, status, header, config){
        });



    };


    $scope.getPosts();





}]);

我需要添加

我的 php 文件的响应类

<?php

namespace App\Http\Controllers;

use App\Post;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Http\Response;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function storePost(Request $request)
    {
        $data = request()->validate([
         'title' => 'required|max:120',
         'body' => 'required|max:1000'
        ]);

        $data['user_id'] = auth()->user()->id;

        $post = Post::create($data);

        $response = new Response(json_encode($data));
        $response->headers->set('Content-Type', 'application/json'); 


        // return redirect('/home')->withMessage('A new post was created.');

        return $response;
    }

现在可以了，谢谢大家