更新Angularjs

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做到這一點：

1. 創建一個工廠對象，並把日期屬性的對象內。
2. 裏面填充 'SecCtrl'
3. 工廠對象屬性分配的工廠對象屬性的 'FirstCtrl'

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

HTML UPDATE scope.date $：

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

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/