Angular JS中的两种方式数据绑定

Question

我知道这个问题之前会被问很多次，但我仍然在 Angular JS 中遇到一些数据绑定问题。我有一个案例，用户从部分页面发布更新并在其他部分显示它。让我们举个例子使用 laravel 刀片：

@extends('layouts/index')
 @section
   @include(header)
   @include(postpage)
   @include(showingpostpage)
   @include(footer)
 @endsection

现在的事情是，如果用户从 postpage 发帖，我会在showingpostpage 页面中显示他的更新。那么在这种情况下，双向数据绑定将如何工作？

到目前为止，我遇到了这个

var Test= angular.module('Test',[],function($interpolateProvider) {
    $interpolateProvider.startSymbol('{=');
    $interpolateProvider.endSymbol('=}');
    });


Test.factory('myService', function($rootScope,$http) {
       return {
         getmeout: function(callback){
           $http.get(baseurl+"ajax/getall").success(callback)
         },

       }
    });

function GetHoot(myService,$scope, $http,$location)
    {

    $scope.comments = [];

    myService.getmeout(function(data){  
            $scope.comments=data;

            });


  $scope.addComment =function(){
           var hoot = $scope.comment.hoot;
             $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';           
             $http({
                method : "POST",
               url :baseurl+ "ajax/hoot",
               data : "hoot="+hoot
            }).success(function(data){             
             $scope.comments=data;             
             $scope.comments.push($scope.comment);
             $scope.comment.hoot = "";   

     });
 }
 $scope.$watch('comments', function(newValue, oldValue){         
     if(newValue != oldValue){  
         console.log($scope.comments);      
        $scope.comments= newValue;
     }       
     });

 }

每当用户输入内容时，我都可以在日志中看到更新的内容，但不会反映在视图中。 我的观点 帖子浏览量：

<div id="ng-app" ng-controller="GetHoot">
<form name="myForm">
                 <input name="hoot" class="title_input" id="hooted" ng-model="comment.hoot" type="text" ng-minlength="2">
                  </div>
                  <div class="profile_right_main01_b_2"><input type="submit" ng-click="addComment(comment.hoot)" class="post" name="submit" value="Post"></div>
                  </div>
                   </form>
  </div>

并显示postpage html：

 <div ng-app="Test" id="ng-app" ng-controller="GetHoot">
   <div ng-repeat="comment in comments" >
    {=comment.hoot=}
   </div>
  </div>

我只能在刷新视图时看到更新？请帮忙

Answer 1

一个建议是形成带有漏洞页面的html。按照您的方式，同一控制器的两个实例同时在您的页面中运行

作为一个例子来说明，你的一般 html 应该是这样的：

@extends('layouts/index')
 @section
 <div ng-app="Test">
    @include(header)
    <div ng-controller="GetHoot">
       @include(postpage)
       @include(showingpostpage)
    </div>
    @include(footer)
 </div>
 @endsection

并从您的帖子页面和显示帖子页面中删除 ng-app 和 ng-controller。 这样一来，您的页面将只有一个控制器实例在运行，并且绑定最终应该可以正常工作。