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

我有以下两个html页面

1。home.html

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

         <Will display all the comments>

</div>

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

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

</div>

新的注释也需要在

home.html

中自动更新。我应该怎么做才能做到这一点

谢谢

更新：

---

当在

comment.html

页面中添加注释时，

ng单击

会触发

submit

功能，

$scope.comments

会使用新注释进行更新，但是当您在不同视图上使用同一控制器时，我该如何在

home.html

中获得更新的注释呢，将创建控制器的不同实例。您需要一个工厂或服务来存储和共享视图之间的数据

因此，在您的情况下，您需要一个注释工厂，类似于

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

您可以构建comments服务来进行db调用，因为这是一种最佳实践（不要从控制器获取外部数据，而是从工厂/服务获取）。您可以构建一个名为getComments（）的方法，然后从控制器调用它

见：

---

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

因此，在您的情况下，您需要一个注释工厂，类似于

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

您可以构建comments服务来进行db调用，因为这是一种最佳实践（不要从控制器获取外部数据，而是从工厂/服务获取）。您可以构建一个名为getComments（）的方法，然后从控制器调用它

见：

---

Angularjs提供双向绑定，因此

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

向控制器注入服务：

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

{{mc.getComments（）}}

在另一个视图中，设置：

<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模型设置为输入文本，用户输入，并且在用户单击时执行ng click属性

最后一句话，有一些服务是由angular提供的。

---

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

Angularjs提供双向绑定，因此

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

向控制器注入服务：

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

{{mc.getComments（）}}

在另一个视图中，设置：

<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模型设置为输入文本，用户输入，并且在用户单击时执行ng click属性

最后一句话，有一些服务是由angular提供的。

---

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

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

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

您能解释一下当前实现的错误吗？鉴于评论是如何在同一个控制器中管理的，不清楚问题出在哪里。你说的“2个html页面”是什么意思？您的意思是说您有两个partial（例如带有

ng include

）？您的意思是，您可以在两个浏览器选项卡中并排打开两个页面，然后看到其中一个选项卡中的更新立即出现在另一个选项卡中？或者这两个不同的页面是由您的后端服务器生成的，并且都必须有注释吗？那么，您是在本地存储上存储，还是使用一些数据库？还是你想活下去？如果使用，则需要提交到数据库或本地存储。@NathanTaylor:谢谢。我已经用更多的细节更新了这个问题。@NewDev:

comments.html

是从

home.html

的一些地方启动的弹出窗口。如果输入并提交了评论，它也应该在

home.html

中更新。很抱歉我想我把每个人都弄糊涂了，说得不对。将更新问题..您能解释一下您当前的实现有什么问题吗？鉴于评论是如何在同一个控制器中管理的，不清楚问题出在哪里。你说的“2个html页面”是什么意思？您的意思是说您有两个partial（例如带有

ng include

）？您的意思是，您可以在两个浏览器选项卡中并排打开两个页面，然后看到其中一个选项卡中的更新立即出现在另一个选项卡中？或者这两个不同的页面是由您的后端服务器生成的，并且都必须有注释吗？那么，您是在本地存储上存储，还是使用一些数据库？还是你想活下去？如果使用，则需要提交到数据库或本地存储。@NathanTaylor:谢谢。我已经用更多的细节更新了这个问题。@NewDev:

comments.html

是从

home.html

的一些地方启动的弹出窗口。如果输入并提交了评论，它也应该在

home.html

中更新。很抱歉我想我把每个人都弄糊涂了，说得不对。将更新问题。。