Update root scope from an AngularJS directive

Question

I have a directive, which watches for a inout box for old and new value. I would want to update the rootscope value here "total" . I tried to use all, that I knew like $rootScope, broadcast the message, emit the message. Here is the code.

app.directive('costCheck',function($compile,$rootScope,$timeout){
$rootScope.gName= "What did i buy?";
    return{
        restrict: 'A',
        link: function(scope,element,attrs){                    
            attrs.$observe('costCheck',function(value){ 

            });
            scope.$watch('cost',function(oldval,newval){alert(attrs.name);  
                alert(oldval+'--'+newval);
                var message = {type: 'channel', action: 'create', data: { name: "ssss", id: 0}};      
                $rootScope.$broadcast('get',message); 
            });     
        }
    }
});

This is my main controller

app.controller('MainCtrl', function($scope,$rootScope) {
 $scope.totalCost = 'workinggg';
 $rootScope.$on('go', function() {alert();
        $scope.totalCost = 'working';
    });
});

How to update the rootscope.

If you only want to update the value you can pass it to the scope scope : { value : '=value'} and avoid nasty broadcast/emits. — haki
– haki, Commented Apr 7, 2014 at 14:21
I forgot to tell this in my question, the directive belongs below another controller — user3498603
– user3498603, Commented Apr 7, 2014 at 15:53

Brocco · Accepted Answer · 2014-04-07 17:27:25Z

1

I agree with the comment from @haki that you should bind the scope values from the controller/directive as shown.

scope : { value : '=value'}

But if you are wanting to broadcast for other reasons (i.e. other controllers) then change $rootScope.$on to $scope.$on. $scope is a child of $rootScope and the broadcast sends the message down to child scopes.

Here is a fiddle showing the binding to the directive scope working.

Edit: fiddle update to set totalCost on $rootScope in the directive

Edit 2: fiddle update to broadcast value down from $rootScope, and handled in another controller

edited Apr 7, 2014 at 17:27

answered Apr 7, 2014 at 14:25

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3498603 Over a year ago

I did not get you!, i tried doing this in ym directive but no luck!

Brocco Over a year ago

@user3498603 I added a fiddle to explain the binding between the controller and the directive

user3498603 Over a year ago

This doesn't work for me, since the directive belongs to a different controller and with that I have to update the rootscope value.

Brocco Over a year ago

I updated the fiddle to set $rootScope.totalCost directly inside the directive.

Brocco Over a year ago

The 2nd fiddle IS updating $rootScope.totalCost which you can see here: jsfiddle.net/T8v6t/2 as the second binding in the h1 is outside of the controller. What error are you seeing?

|

Pieter Herroelen · Accepted Answer · 2014-04-07 15:10:22Z

There are many ways to accomplish this, and I wouldn't do it this way, but I'm just trying to make your code work here.

I guess you don't want to update the root scope (as the title says), but you want to communicate through the root scope.
As @Shomz said, you need to match the event names of course.
If you use $rootScope, you can just emit the event instead of doing a broadcast, then it doesn't have to bubble down in your app

Directive code:

$rootScope.$emit('totalCostUpdated',message);

Main controller:

app.controller('MainCtrl', function($scope,$rootScope) {
   $scope.totalCost = 'workinggg';
   $rootScope.$on('totalCostUpdated', function(event, args) {
       $scope.totalCost = 'working';
   });
});

I would probably do it with a shared service, though. Take a look at https://egghead.io/lessons/angularjs-sharing-data-between-controllers .

Collectives™ on Stack Overflow

Update root scope from an AngularJS directive

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related