$观看服务变量或$与广播的AngularJS事件 [英] $watch a service variable or $broadcast an event with AngularJS
问题描述
我使用一个服务共享控制器之间的数据。应用程序具有当变量被修改以更新DOM。我发现两种方法可以做到这一点，你可以看到code位置：
http://jsfiddle.net/sosegon/9x4N3/7/
myApp.controller（CTRL1，[$范围，为myService功能（$范围，为myService）{
$ scope.init =功能（）{
$ scope.myVariable = myService.myVariable;
};
}]）;
myApp.controller（CTRL2，[$范围，为myService功能（$范围，为myService）{
$ scope.increaseVal =功能（）{
VAR一个= myService.myVariable.value;
myService.myVariable.value = A + 1;
};
}]）;
http://jsfiddle.net/sosegon/Y93Wn/3/
myApp.controller（CTRL1，[$范围，为myService功能（$范围，为myService）{
$ scope.init =功能（）{
$ scope.increasedCounter = 1;
$ scope.myVariable = myService.myVariable;
};
$范围。在$（增加，函数（）{
$ scope.increasedCounter + = 1;
}
}]）;
myApp.controller（CTRL2，[$范围，为myService功能（$范围，为myService）{
$ scope.increaseVal =功能（）{
myService.increaseVal（）;
};
}]）;
在第一种情况下，我从与控制器的服务共享一个变量和$在指令中观看。在这里，我可以直接修改变量在此控制器，或分享任何其他控制器和DOM被更新。
在其他的选项，我用一个函数从服务到修改的$播送活动的变量。该事件是由控制器听着，然后在DOM被更新。
我想知道哪个选项是更好的理由。
感谢。
编辑：
在的jsfiddle的code，是真正的code有更多的对象和函数的简化版本。在售后服务上，MYVARIABLE的价值领域实际上是不仅仅是一个基本类型更多的信息的对象;该信息必须被显示，并且在DOM更新。对象myVariable.value被设置在每一个变化：
myVariable.value =为newValue;
当这种情况发生的所有DOM元素必须被更新。由于包含在myVariable.value的信息是可变的，（我不能使用数组），它更容易删除的DOM元素，并创造新的属性变化的数字，这就是我的指令正在做（但在现实code的元素）：
范围。$表（myVariable.value功能（的newval，OLDVAL）{ 如果（的newval === OLDVAL）{ 返回; } 而（元素[0] .children.length大于0）{ 元素[0] .removeChild（元素[0] .firstChild）; }
变种E = angular.element（元）;
e.append（＆LT;跨度＆GT;值是：+ scope.myVariable.value +＆LT; / SPAN＆GT;）; }）;
您code是反反复复。我不知道什么是你想与该指令执行。
您不必 $观看也不 $广播东西。
您在你的服务，它有一种原始的一个对象。在CTRL1你将对象分配到 $范围（这是好的，因为如果我们将其分配给原始的，它需要一个 $看肯定是这里看到。
到目前为止好。要增加值，有一个简单的方法只是做 ++设为myVal 不需要临时变量。
有关的指示，我不知道在这里你的目标，我把它简化成你需要把这个例子的工作是什么。你并不需要 $观看也不 $广播。 CTRL1 是知道的对象为 MYVARIABLE 所做的更改，所以如果它的变化，你会发现它。
code：
VAR对myApp = angular.module（对myApp，[]）;myApp.provider（为myService功能（）{ VAR MYVARIABLE = {
值：0
};
这一点。$ GET =功能（）{
返回{
MYVARIABLE：MYVARIABLE，
增加：功能（）{
myVariable.value ++;
}
};
};
}）;myApp.directive（DIR1功能（）{
返回{
限制：EA，
模板：'＆LT; DIV＆GT;值：{{myVariable.value}}＆LT; / DIV＆GT;，
替换：真
};
}）;
myApp.controller（CTRL1，[$范围，为myService功能（$范围，为myService）{
$ scope.myVariable = myService.myVariable;
}]）;myApp.controller（CTRL2，[$范围，为myService功能（$范围，为myService）{
$ scope.increaseVal = myService.increase;
}]）;
查看：
＆LT;机身NG-应用=对myApp＆GT;
＆LT; DIV DIR1 =myVariable.valueNG控制器=CTRL1＆GT;
＆LT; / DIV＆GT; ＆LT; DIV NG控制器=CTRL2＆GT;
＆LT;按钮NG点击=increaseVal（）＆GT;
增加
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
下面是我的叉形小提琴： http://jsfiddle.net/uWdUJ/ 同样的想法一点点清洗。
I'm using a service to share data between controllers. The application has to update the DOM when a variable is modified. I've found two ways to do that, you can see the code here:
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();
};
}]);
In the first case, I share a variable from the service with the controller and $watch it in the directive. Here, I can modify the variable directly in this controller, or any other controller that share it, and the DOM is updated.
In the other option, I use a function from the service to modify the variable which $broadcast an event. That event is listened by the controller, then the DOM is updated.
I'd like to know which option is better and the reasons for that.
Thanks.
EDIT:
The code in jsFiddle, is a simplified version of the real code which has more objects and functions. In the service, the value field of myVariable is actually an object with much more information than just a primitive type; that information has to be displayed and updated in the DOM. The object myVariable.value is set in every change:
myVariable.value = newValue;
When that happens all the DOM elements have to be updated. Since the information contained in myVariable.value is variable, the number of properties changes (I can't use an array), it's much easier to delete the DOM elements and create new ones, that's what I'm doing in the directive (but with more elements in the real code):
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>" );
} );
Your code is over complex. I am not sure what are you trying to do with that directive.
You don't have to $watch nor $broadcast anything.
You have a object in your service which has a primitive. In ctrl1 you're assigning the object to the $scope (That is good, because if we assign it to the primitive, it will need a $watch for sure as seen here.
So far so good. To increase the value, there is an easy way just doing myVal++ no need of temporary variables.
For the directive, I am not sure what's your goal here, I simplified it to what you need to put that example to work. You don't need to $watch nor $broadcast. ctrl1 is aware of the changes made to myVariable object so if it changes, you will notice it.
Code:
var myApp = angular.module( "myApp", [] );
myApp.provider( "myService", function(){
var myVariable = {
value: 0
};
this.$get = function(){
return {
myVariable: myVariable,
increase: function() {
myVariable.value++;
}
};
};
});
myApp.directive( "dir1", function(){
return {
restrict: 'EA',
template: '<div>value: {{myVariable.value}}</div>',
replace: true
};
});
myApp.controller("ctrl1", ["$scope", "myService", function($scope, myService){
$scope.myVariable = myService.myVariable;
}]);
myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
$scope.increaseVal = myService.increase;
}]);
View:
<body ng-app = "myApp">
<div dir1="myVariable.value" ng-controller = "ctrl1">
</div>
<div ng-controller = "ctrl2">
<button ng-click = "increaseVal()">
Increase
</button>
</div>
</body>
Here is my forked fiddle: http://jsfiddle.net/uWdUJ/ Same idea a little bit cleaned.
这篇关于$观看服务变量或$与广播的AngularJS事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
