Как проверить $ scope.watch(), используемый в функции ссылки пользовательской директивы

Question

Я пытаюсь выполнить единицу теста пользовательской директивы, которая использует , чтобы зафиксировать любые изменения, сделанные с его значением атрибута.

jsfiddle for the directive is here

код тест 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 того же элемента, так берет изменение, и ему присваивается новое значение?

Answer 1

Вместо жесткого кодирование значения атрибута в шаблоне, инициализировать его значение приходит от объема:

data-color="someValue" 

и

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

Затем изменить значение этого объекта в объеме:

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

Answer 2

Вы должны использовать наблюдение вместо:

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