Угловая JS директива «@» $ сфера не- $ переваривания

Question

Дано:

var myApp = angular.module('myApp', []); 

myApp.directive('myDirective', function() {  
    return { 
     restrict: 'E', 
     scope: { 
      classToAdd: '@' 
     }, 
     template: 
     '<div class="{{classToAdd}}"></div>' 
    }; 
}); 

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

<my-directive class-to-add="foo"></my-directive> 

и classToAdd атрибут признается только в том случае, если I $digest$rootScope, а не $scope.

Почему это так?

Working fiddle.

Answer 1

Причина показана скрипка терпела неудачу, является то, что «Foo» связан с $rootScope, а не местным $scope.

Решение установить переменную области видимости, интерполировать его с помощью {{foo}} (так как мы используем "@" в точечном объеме)

it('should bind to the class-to-add attribute when we $digest $scope', function() { 
    // Arrange 
    template = '<my-directive class-to-add="{{foo}}"></my-directive>'; 
    compiledDirective = $compile(template)($scope); 
    directiveEl = compiledDirective.find('div'); 
    $scope.foo = "bar" 

    // Act 
    $scope.$digest(); 

    // Assert 
    expect(directiveEl.hasClass('bar')).toBe(true); 
}); 

Answer 2

вы можете написать код так:

angular.module('app',[]) 
.controller('ctrl',['$scope',function($scope){ 
    $scope.myClass="myClass"; 
}]) 
.directive('myDirective',function(){ 
    return { 
     restrict:'E', 
     scope:{ classToAdd: '@' }, 
     transclude:true, 
     replace: true, 
     template:'<div class="{{classToAdd}}" ng-transclude></div>', 
     link: function(scope, iElement, iAttrs){ 
      console.log(scope); 
      console.log(iAttrs); 
     } 
    } 
}) 

и здесь работает DEMO

обратите внимание на консоль для бревен и под капот.