Question

我正在尝试对自定义指令进行单元测试，该指令使用$scope.$watch来捕获对其属性值所做的任何更改。

Jasmin测试用例代码：

it('should capture changes to color attribute', function() {
     var htmlElement = $compile('<div data-my-directive data-color="{color:blue}"></div>')($rootScope);
     expect(htmlElement).toHaveAttr('style', 'color:blue');
     //Now I want to change the color value of this htmlElement so $scope.watch comes into picture
});

如果您引用测试用例代码，我将设置data-color属性的初始值并将其编译为htmlElement。现在，我如何更改相同元素的data-color属性，以便$scope.$watch获取更改并为其分配新值？

Answer 1

你应该使用observe：

attributes.$observe('color', function(color){
    // convert string to object
    color = scope.$eval(color);
});

或在指令中使用范围：

scope: {
    color: '=color'
},
link: function(scope, element, attrs){
    scope.$watch('color', function(color){
        // you get color object here
    });
}

Answer 2

不是硬编码模板中属性的值，而是将其初始化为来自范围的值：

data-color="someValue"

和

$rootScope.someValue = {color: 'blue'};

然后在范围中更改此对象的值：

$rootScope.someValue = {'color': 'black'};
$rootScope.$apply();

如何测试自定义指令链接函数中使用的$ scope.watch（）

2 个答案: