$watch for value change from inside angular directive when using isolate scope

Question

I am trying to find a way to watch for a changing value of a property in an object I am scoping my directive to and I'm unable to figure out what I'm doing wrong here.

Here is my directive code:

.directive('selectService', [function() {
  return {
    restrict: 'EA',
    scope: {
      distribution: '='
    },
    link: function(scope, element, attrs) {
      scope.$watch(scope.distribution.name, function(newValue) {
        console.log("Changed to " + newValue);
      });

So say distribution at the time this gets run is something like this:

{ name: '', type: 'all' ... }

I want to $watch for when the property 'name' changes to have a value so that I can enable a select menu in my directive. Everything I've done seems to not work. Any help is appreciated.

PSL · Accepted Answer · 2015-02-04 21:17:59Z

1

Just use watch the normal way, provide a string representing property on the scope or a function that returns the value to be watched.

  scope.$watch('distribution.name', function(newValue) {
    console.log("Changed to " + newValue);
  });

for setting up deep watch on the object distribution set the third argument of watch to true. When you provide scope.distribution.name as the first argument to the watch function, it will just set up watch on the value (at that time) of scope.distribution.name which is incorrect.

Demo

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.distribution = {};
}).directive('selectService', [
  function() {
    return {
      restrict: 'EA',
      scope: {
        distribution: '='
      },
      link: function(scope, element, attrs) {
        scope.$watch("distribution.name", function(newValue) {
          console.log("Changed to " + newValue);
        });
      }
    }
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input ng-model="distribution.name">{{distribution.name}}
  <div select-service distribution="distribution"></div>
</div>

edited Feb 4, 2015 at 21:17

answered Feb 4, 2015 at 21:12

PSL

124k21 gold badges257 silver badges243 bronze badges

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

5 Comments

jaredwilli Over a year ago

I have also tried this as well, and when I enter a value in the name input field which is outside the directive, the directive code has already run, and it never hits this watch expression again for some reason.

PSL Over a year ago

@jaredwilli watch will always run for the first time for dirty checking. your hsould not have that issue. DO you have a demo?\

jaredwilli Over a year ago

Don't have a demo, the app i'm making is quite complex and replicating what i'm doing would be impossible unfortunately.

PSL Over a year ago

Nothing is impossible. See my demo. You need to throw in more context to your question then. Is your input inside something that creates a child scope? like ng-repeat/ng-if etc? Atleast show us full minimal relevant code.

jaredwilli Over a year ago

I actually just realized I was working in the wrong file lol. Wtf. I am sorry, this thread is no longer needed cuz I now just do ng-if=distribution.name on my directive tag, so that it shows the directive only after there is a name value, so I dont need to do $watch at all, which turns out to be a better UX as well. Thanks for your help though!!

Collectives™ on Stack Overflow

$watch for value change from inside angular directive when using isolate scope

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related