我正在使用服务在控制器之间共享数据。修改变量时,应用程序必须更新 DOM。我找到了两种方法可以做到这一点,您可以在此处查看代码:
http://jsfiddle.net/sosegon/9x4N3/7/
myApp.controller( "ctrl1", [ "$scope", "myService", function( $scope, myService ){
$scope.init = function(){
$scope.myVariable = myService.myVariable;
};
}]);
myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
$scope.increaseVal = function(){
var a = myService.myVariable.value;
myService.myVariable.value = a + 1;
};
}]);
http://jsfiddle.net/sosegon/Y93Wn/3/
myApp.controller( "ctrl1", [ "$scope", "myService", function( $scope, myService ){
$scope.init = function(){
$scope.increasedCounter = 1;
$scope.myVariable = myService.myVariable;
};
$scope.$on( "increased", function(){
$scope.increasedCounter += 1;
}
}]);
myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
$scope.increaseVal = function(){
myService.increaseVal();
};
}]);
在第一种情况下,我与控制器共享服务中的一个变量,并在指令中 $watch 它。在这里,我可以直接在这个控制器或任何其他共享它的控制器中修改变量,并更新 DOM。
在另一个选项中,我使用服务中的函数来修改 $broadcast 事件的变量。该事件由控制器监听,然后更新 DOM。
我想知道哪个选项更好以及这样做的原因。
谢谢。
编辑:
jsFiddle 中的代码是真实代码的简化版本,具有更多的对象和功能。在服务中,myVariable 的 value 字段实际上是一个对象,其信息远不止一个原始类型;该信息必须在 DOM 中显示和更新。每次更改都会设置对象 myVariable.value:
myVariable.value = newValue;
当这种情况发生时,所有的 DOM 元素都必须更新。由于 myVariable.value 中包含的信息是可变的,属性的数量会发生变化(我不能使用数组),删除 DOM 元素并创建新元素要容易得多,这就是我在指令中所做的(但是在真实代码中有更多元素):
scope.$watch( "myVariable.value", function( newVal, oldVal ){
if( newVal === oldVal ){
return;
}
while( element[0].children.length > 0 ){
element[0].removeChild( element[0].firstChild );
}
var e = angular.element( element );
e.append( "<span>Value is: " + scope.myVariable.value + "</span>" );
} );