Question

我有以下2个html页面

1。 home.html的

<div data-ng-controller="userComments">

         <Will display all the comments>

</div>

2。 comments.html

<div data-ng-controller="userComments">

         <Have a comment box and submit button. 
         Submit button calls submit() function on ng-click>

</div>

其中弹出comments.html，从主页启动。并且控制器

    .controller('userComment',['$scope', function($scope){
        $scope.title = 'User Comment';
        $scope.comments = <db call>
        $scope.cmt = '';
        $scope.submit = function(){
            console.log("comment just entered", $scope.cmt);
            $scope.comments = $scope.comments.concat($scope.cmt);
            console.log("Updated Comments", $scope.comments);
            };
    }])

新评论也需要在home.html中自动更新。我该怎么做才能做到这一点？

由于

更新

当评论添加到comment.html页面时，ng-click触发submit功能，$scope.comments会根据新评论进行更新，但我应该怎样做才能获得home.html也更新了评论？

Answer 1

在不同视图上使用同一个控制器时，会创建不同的控制器实例。您需要工厂或服务来在视图之间存储和共享数据。

所以在你的情况下，你会想要一个评论工厂，比如

myApp.factory('commentsService', function() {
  return {
    comments: []
  };
});

然后在你的控制器中：

.controller('userComment',['$scope', 'commentsService', function($scope, commentsService){
    $scope.title = 'User Comment';
    $scope.comments = commentsService.comments;
    $scope.cmt = '';
    $scope.submit = function(){
        console.log("comment just entered", $scope.cmt);
        $scope.comments = $scope.comments.concat($scope.cmt);
        // store the comments for use across views
        commentsService.comments = $scope.comments;
        console.log("Updated Comments", $scope.comments);
        };
}])

您可以构建注释服务以进行数据库调用，因为这是一种角度最佳实践（不要从控制器获取外部数据，从工厂/服务执行）。你构建了一个名为getComments（）之类的方法，然后从控制器中调用它。

请参阅： https://docs.angularjs.org/guide/services

Angularjs - Updating multiple instances of the same controller

Answer 2

Angularjs提供双向绑定，因此插入

<div data-ng-controller="userComments">
         {{comments}}
</div>

会更新评论。要在整个应用程序中使用相同的数据（由ng-app指令定义的数据），请定义服务：

您可以将服务注入任何控制器
整个应用程序中的服务数据相同。

使用模块的服务方法创建服务。

var app = angular.module('myApp',[]).service('myService', function() { 
    this.comments = [];
    });

向控制器注入服务：

.controller('MyController',['myService',function(myService){
this.addComments = function(data){
myService.comments.push(data);
}
this.getComments = function(){
return myService.comments;
};
}]);

这会在应用程序中保持数据相同，您也可以将此服务注入其他控制器。

调用稍后使用服务的控制器：

<div ng-controller="MyController as mc">
    {{mc.getComments()}}
</div>

在另一个视图中，设置：

<div ng-controller="MyController as mc">
    <input type="text" ng-model="myComm"/>
    <button type="submit" ng-click="mc.addComment(myComm)" value="Add comment"></button>
</div>

用新评论设置服务。 myComm是可变的。 ng-model设置为输入文本，用户输入，ng-click属性在用户点击时执行。

最后一句话，有角度提供的服务。有$ http用于网络调用，$ timeout用于在特定时间后调用东西。您可以将它们用于特定操作，也可以拥有自己的服务。

Answer 3

您还可以使用AngularJS中捆绑的事件来传达这两个实例。因此，每当comments数组发生更改时，您都可以触发另一个控制器侦听的自定义事件，然后更新另一个控制器的comments数组。

Angular.js：如何将数据从一个HTML更新为使用相同控制器的其他HTML

3 个答案: