为什么我的$ watch在指令测试中不起作用-Angular.js

Question

I have a directive in which I pass in an attrs and then it is watched in the directive. Once the attrs is changed, then an animation takes place. My attrs always is undefined when the $watch gets triggered.

App.directive('resize', function($animate) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.resize, function(newVal) {
      if(newVal) {
        $animate.addClass(element, 'span8');
      }
    });
  };
});

And here is my test:

describe('resize', function() {
  var element, scope;
  beforeEach(inject(function($compile, $rootScope) {
    var directive = angular.element('<div class="span12" resize="isHidden"></div>');
    element = $compile(directive)($rootScope);
    $rootScope.$digest();
    scope = $rootScope;
  }));

  it('should change to a span8 after resize', function() {
    expect($(element).hasClass('span12')).toBeTruthy();
    expect($(element).hasClass('span8')).toBeFalsy();
    element.attr('resize', 'true');
    element.scope().$apply();
    expect($(element).hasClass('span8')).toBeTruthy();
  });
});

When the attrs changes, my watchers newValue is undefined and so nothing happens. What do I need to do to make this work? Here is a plunker

Answer 1

You are not watching the value of attrs.resize ; you are watching the value pointed by attrs.resize instead, in the test case a scope member called isHidden . This does not exist, thus the undefined .

For what you aare trying to do, the following would work:

App.directive('resize', function($animate) {
    return function(scope, element, attrs) {
        scope.$watch(
            // NOTE THE DIFFERENCE HERE
            function() {
                return element.attr("resize");
// EDIT: Changed in favor of line above...
//              return attrs.resize;
            },
            function(newVal) {
                if(newVal) {
                    $animate.addClass(element, 'span8');
                }
            }
        );
    };
});

---

EDIT: It seems that the attrs object does NOT get updated from DOM updates for non-interpolated values. So you will have to watch element.attr("resize") . I fear this is not effective though... See forked plunk: http://plnkr.co/edit/iBNpha33e2Xw8CHgWmVx?p=preview

Answer 2

Here is how I was able to make this test work. I am passing in a variable as an attr to the directive. The variable name is isHidden . Here is my test with the updated code that is working.

describe('resize', function() {
  var element, scope;
  beforeEach(inject(function($compile, $rootScope) {
    var directive = angular.element('<div class="span12" resize="isHidden"></div>');
    element = $compile(directive)($rootScope);
    $rootScope.$digest();
    scope = $rootScope;
  }));

  it('should change to a span8 after resize', function() {
    expect($(element).hasClass('span12')).toBeTruthy();
    expect($(element).hasClass('span8')).toBeFalsy();
    element.scope().isHidden = true;
    scope.$apply();
    expect($(element).hasClass('span8')).toBeTruthy();
  });
});

I am able to access the variable isHidden through the scope that is attached to the element . After I change the variable, the I have to run $digest to update and then all is golden.

I feel that I should probably be using $observe here as was noted by package . I will look at that and add a comment when I get it working.

Answer 3

As Nikos has pointed out the problem is that you're not watching the value of attrs.resize so what you can try doing is this:

Create a variable to hold your data and create these $watch functions:

var dataGetter;

scope.$watch(function () {
    return attrs.resize;
}, function (newVal) {
    dataGetter = $parse(newVal);
});

scope.$watch(function () {
    return dataGetter && dataGetter(scope);
}, function (newVal) {
    // Do stuff here         
});

What should happen here is that Angular's $parse function should evaluate attrs.resize and return a function like this . Then you pass it the scope and do something. As long as attrs.resize is just a boolean then newVal in the 2nd watch expression should be a boolean, I hope.