Question

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

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

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

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

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>

并显示帖子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。这样，您的页面将只有一个控制器实例，并且绑定最终应该正常工作。

Angular JS中的双向数据绑定

1 个答案: