AngularJS directive not being updated with parent scope variable changes

Question

I have a directive and a controller in my AngularJS app as shown below, where I need the directive to be updated with the controller scope variable changes.

Problem I am facing is that any change to the controller scope variable do not update the directive. I've tried using {scope: false}, tried making an isolated scope and one-way binding with the controller scope variable as shown below but none worked, so can someone please check my code and let me know what I am missing / doing wrong here? Thanks

First trial using isolated scope in directive

.directive('loginPanelDir', function() {
 return {
    restrict: 'A',
    scope: {
       loginStatus: "&userLoginStatus"
    },
    link: function(scope, element, attrs) {            

        console.log(scope.loginStatus()); //will always print 0 despite of changes to the scope var in controller            
    }

 };
});

.controller('LoginController', function ($scope, $location) {       
    $scope.LoginStatus = "0";

    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };

});

<div id="login" login-panel-dir user-login-status="LoginStatus">
<button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>

Second trial using {scope:false} in directive

.directive('loginPanelDir', function() {
 return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {            

        console.log(scope.LoginStatus()); //will always print 0 despite of changes to the scope var in controller         

    scope.$watch(function(){ scope.LoginStatus }, function(){
        console.log('Login status  : '+scope.LoginStatus);  //will always return 0...          
    });

    }

 };
});

.controller('LoginController', function ($scope, $location) {       
    $scope.LoginStatus = "0";
    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };

});

<div id="login" login-panel-dir>
<button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>

ryeballar · Accepted Answer · 2014-08-06 01:52:24Z

1

You don't have to use $timeouts or $intervals to watch changes for certain scope values. Inside your directive you can watch for the changes of your login status via watching the user-login-status attribute.

DEMO

Something like this:

JAVASCRIPT

  .controller('LoginController', function($scope) {
    $scope.LoginStatus = "0";

    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };
  })

  .directive('loginPanelDir', function() {
    return function(scope, elem, attr) {
      scope.$watch(attr.userLoginStatus, function(value) {
        console.log(value);
      });
    }
  });

HTML

<div id="login" login-panel-dir user-login-status="LoginStatus">
  <button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>
</div>

edited Aug 6, 2014 at 1:52

answered Aug 5, 2014 at 12:08

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

Comments

ms87 · Accepted Answer · 2014-08-05 11:20:16Z

0

Working plunk. Use $timeout not setTimeout:

 setTimeout(function(){
       $scope.LoginStatus = "1";
    }, 3000);

should be:

 $timeout(function(){
       $scope.LoginStatus = "1";
    }, 3000);

setTimeout is native Javascript, so it will not run a digest and angular won't be notified of the changes hence no updates to the bindings, $timeout runs a digest when it completes, forcing an update to the binding.

Well its working here, just realized your $watch is also wrong: it should be:

scope.$watch("LoginStatus", function(){
    console.log('Login status  : '+scope.LoginStatus);  //will always return 0...          
});

edited Aug 5, 2014 at 11:20

answered Aug 5, 2014 at 10:38

ms87

17.5k23 gold badges89 silver badges123 bronze badges

5 Comments

MChan Over a year ago

I am using & as I am doing one way binding. The issue is not related to timeout at all, even if I change the variable in any way it will still not update the directive

MChan Over a year ago

Once again it is not related to setTimeout. Even if I totally removed setTimeout and tried to change the variable in controller upon button click or so, it will not update the directive

ms87 Over a year ago

Did you try my other suggestions regarding the way you pass it to the directive?

MChan Over a year ago

Please read the question update first. Yes I have tried all what you have suggested and I can assure you it doesn't work

Malkus Over a year ago

@MohammadSepahvand is correct in regards to using $timeout. Regardless of whether you instance of setTimeout works you should get in the habit of using angular options if they are available. Eventually it will catch up with you because angular compiles and stores everything independently.

Collectives™ on Stack Overflow

AngularJS directive not being updated with parent scope variable changes

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related