$watch a service variable or $broadcast an event with AngularJS -
i'm using service share data between controllers. application has update dom when variable modified. i've found 2 ways that, can see 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 = myservice.myvariable.value; myservice.myvariable.value = + 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 first case, share variable service controller , $watch in directive. here, can modify variable directly in controller, or other controller share it, , dom updated.
in other option, use function service modify variable $broadcast event. event listened controller, dom updated.
i'd know option better , reasons that.
thanks.
edit:
the code in jsfiddle, simplified version of real code has more objects , functions. in service, value field of myvariable object more information primitive type; information has displayed , updated in dom. object myvariable.value set in every change:
myvariable.value = newvalue; when happens dom elements have updated. since information contained in myvariable.value variable, number of properties changes (i can't use array), it's easier delete dom elements , create new ones, that's i'm doing in directive (but more elements in 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 on complex. not sure trying directive.
you don't have $watch nor $broadcast anything.
you have object in service has primitive. in ctrl1 you're assigning object $scope (that good, because if assign primitive, need $watch sure seen here.
so far good. increase value, there easy way doing myval++ no need of temporary variables.
for directive, not sure what's goal here, simplified need put example work. don't need $watch nor $broadcast. ctrl1 aware of changes made myvariable object if changes, 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 forked fiddle: http://jsfiddle.net/uwduj/ same idea little bit cleaned.
Comments
Post a Comment