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属性仅在我$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

注意日志和引擎盖下的控制台。

Angular JS指令“@”$ scope in- $ digestion

2 个答案: