Question

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

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

注意：角撑架被更换，因为laravel刀片不喜欢它

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-repeats使用ng-repeat的特殊属性（如$last或$even别名）。如果你想要一个功能立即触发，只需在控制器或服务/工厂中调用它，它就在。

中定义

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

＆＃13;

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();



});

＆＃13;

<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>

＆＃13;

上面的工作版可以用$ http替换$ timeout他们都叫$ apply for you所以不要再调用它（如果你编写自己的async工作的东西，只需要调用$ 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;
    }

它现在有效，谢谢大家

ng-click

2 个答案: