Question

我有一个问题，我有两个独立的，有两个不同的控制器，像这样：

<div ng-app='demoApp'>
    <div ng-controller='FirstCtrl'>    
        {{date | date:'yyyy-MM-dd hh:mm:ss'}}
    </div>
    <div ng-controller='SecCtrl'>
        <button type="submit" ng-click="update()" >Add</button>
    </div>
</div>

当我点击第二个控制器的按钮时，我想更新第一个控制器中的日期。

这是jsfiddle：http://jsfiddle.net/wa8nsh9j/9/

Answer 1

您可以通过在AngularJS中使用工厂来实现这一目标：

创建工厂对象并将date属性放在对象中。
在＆＃39; SecCtrl＆＃39;
将工厂对象属性分配给＆＃39; FirstCtrl＆＃39;

＆＃13;

demoApp.factory('DataFactory', function(a) {
  return {
    dateVal : null
  }
}); 

demoApp.controller("FirstCtrl", function(DataFactory) {
  //$scope.date = DataFactory.dateVal; //->This wont work
  $scope.date = DataFactory;
});

demoApp.controller("SecCtrl", function(DataFactory) {
  $scope.update = function() {
    DataFactory.dateVal = new Date();
  }
});

＆＃13;

HTML更新：

＆＃13;

<div ng-controller='FirstCtrl'>    
    {{date.dateVal | date:'yyyy-MM-dd hh:mm:ss'}}
</div>

＆＃13;

Answer 2

如果您执行$scope.date = new Date()，则替换对日期属性的引用，因此其他控制器不再跟踪它。您必须在$ scope.model属性中存储对UpDate服务的引用以克服此问题。

angular.module('demoApp', [])
    .controller('FirstCtrl', function($scope, UpDate){  
        $scope.model = UpDate;                
    })
    .controller('SecCtrl', function($scope, UpDate){
        $scope.model = UpDate;        

        $scope.update = function () {
            $scope.model.date = new Date();
        };
    })
    .service('UpDate', function(){
        this.date = new Date();     
    });

http://jsfiddle.net/wa8nsh9j/11/

在Angularjs网站上发生变化时更新

2 个答案: