The same code but different behavior for AngularJS Directive

Question

I wrote a directive 'xxx' and it has different behavior on a browser and Jasmine testing framework:

someapp.directive('xxx', function () {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        x: '=xxx'
      },
      template: '<div>Hello World {{x}}</div>',
      link: function (scope, element, attrs) {
      }
    };
  });

For browser:

<body ng-controller="MainCtrl">
  <div xxx="name"></div>
</body>

someapp.controller('MainCtrl', function($scope) {
  $scope.name = 'Test';
});

It will show "Hello World Test" on the screen in a browser. If in the link function, I add one line:

global_var = element;

and add one line of HTML

<button onclick="javascript:alert(global_var.text());">Test</button>

It will also pop up the alert dialog to show the text "Hello World Test".

However, for Jasmine testing framework:

beforeEach(module('someapp'));

var element,
  scope;

beforeEach(inject(function ($rootScope) {
  scope = $rootScope.$new();
  scope.name = 'Test';
}));

it('should expand "x"', inject(function ($compile) {
  element = angular.element('<div xxx="name"></div>');
  element = $compile(element)(scope); 
  expect(element.text()).toBe('Hello World Test');
}));

It will report the error: expected "Hello World {{x}}" to be "Hello World Test"

Does anyone know why? Thanks.

gkalpak · Accepted Answer · 2014-04-15 10:20:51Z

1

For the changes to take effect (i.e. for Angular to do its thing) you need to call scope.$apply() or scope.$digest().
($digest() would suffice for this scenario, but in a more complex situation (involving parent scopes etc) you might need to call (the more expensive) $apply() method.)

See, also, this short demo.

answered Apr 15, 2014 at 10:20

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

Collectives™ on Stack Overflow

The same code but different behavior for AngularJS Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related