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

我正在尝试对一个自定义指令进行单元测试，该指令使用

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

it（'应捕获颜色属性的更改'，函数（）{
var htmlElement=$compile（“”）（$rootScope）；
expect（htmlElement）.toHaveAttr（'style'，'color:blue'）；
//现在我想更改这个htmlElement的颜色值，以便$scope.watch进入图片
});

如果您参考测试用例代码，我将设置

data color

属性的初始值，并将其编译为htmlElement。

---

现在，我如何更改同一元素的

数据颜色

属性，以便

$scope.$watch

获取更改并为其分配新值？

您应该改用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
    });
}

---

与其在模板中硬编码属性值，不如将其初始化为来自以下范围的值：

data-color="someValue"

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

及

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

data-color="someValue"

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