Question

我有一个指令，它使用隔离范围将数据传递给随时间变化的指令。它会监视该值的变化，并对每次更改进行一些计算。当我尝试对指令进行单元测试时，我无法触发手表（为简洁而修剪，但基本概念如下所示）：

指令：

angular.module('directives.file', [])
.directive('file', function() {
  return {
    restrict: 'E',
    scope: {
      data: '=',
      filename: '@',
    },
    link: function(scope, element, attrs) {
      console.log('in link');
      var convertToCSV = function(newItem) { ... };

      scope.$watch('data', function(newItem) {
        console.log('in watch');
        var csv_obj = convertToCSV(newItem);
        var blob = new Blob([csv_obj], {type:'text/plain'});
        var link = window.webkitURL.createObjectURL(blob);
        element.html('<a href=' + link + ' download=' + attrs.filename +'>Export to CSV</a>');
      }, true);
    }
  };
});

测试

describe('Unit: File export', function() {
  var scope;

  beforeEach(module('directives.file'));
  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope.$new();
  };

  it('should create a CSV', function() {
    scope.input = someData;
    var e = $compile('<file data="input" filename="filename.csv"></file>')(scope);
    //I've also tried below but that does not help
    scope.$apply(function() { scope.input = {}; });
  });

我可以做些什么来触发手表以便我的＆＃34; In watch＆＃34;调试语句是否被触发？我的＆＃34;在链接＆＃34;我编译时会被触发。

Answer 1

要使$watch被触发，必须在定义的范围或其父级上进行摘要循环。由于您的指令创建了隔离范围，因此它不会从父范围继承，因此在您在适当的范围内调用$apply之前，其观察者不会得到处理。

您可以通过调用scope()服务返回的元素上的$compile来访问指令范围：

scope.input = someData;
var e = $compile('<file data="input" filename="filename.csv"></file>')(scope);
e.isolateScope().$apply();

这个jsFiddler就是例证。

单元测试AngularJS指令，该指令监视具有隔离范围的属性

1 个答案: