Question

我写了一个指令＆＃39; xxx＆＃39;它在浏览器和Jasmine测试框架上有不同的行为：

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

对于浏览器：

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

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

它将显示＆＃34; Hello World Test＆＃34;在浏览器的屏幕上。如果在链接功能中，我添加一行：

global_var = element;

并添加一行HTML

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

它还会弹出警告对话框以显示文本＆＃34; Hello World Test＆＃34;。

然而，对于Jasmine测试框架：

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');
}));

它将报告错误：预期＆＃34; Hello World {{x}}＆＃34;成为＆＃34; Hello World Test＆＃34;

有谁知道为什么？感谢。

Answer 1

要使更改生效（即Angular要执行此操作），您需要调用 scope.$apply() 或 scope.$digest() 。
（ $digest() 对于这种情况就足够了，但在更复杂的情况下（涉及父作用域等），您可能需要调用（更昂贵的） $apply() < / strong>方法。）

另请参阅此 short demo 。

AngularJS指令的代码相同但行为不同

1 个答案: