我正在使用一项服务在控制器之间共享数据。当变量被修改时，应用程序必须更新 DOM。我找到了两种方法来做到这一点，您可以在此处查看代码：
http://jsfiddle.net/sosegon/9x4N3/7/ 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/ 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。
我想知道哪种选择更好以及原因。
Thanks.
EDIT:
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>" );
} );
