Unit testing “角度JS指令”@&引用$范围在-$消化

鉴于：

只有当我

$digest

$rootScope

时，才能识别

classToAdd

属性，而不是

$scope

为什么会这样

---

显示的fiddle失败的原因是“foo”绑定到

$rootScope

，而不是本地

$scope

解决方案是设置范围变量，使用

{{foo}}

对其进行插值（因为我们在隔离范围中使用了

“@”

）

it（'当我们使用$digest$scope'函数时，应该绑定到类以添加属性（）{
//安排
模板=“”；
compiledDirective=$compile（模板）（$scope）；
directiveEl=compiledDirective.find（'div'）；
$scope.foo=“bar”
//表演
$scope.$digest（）；
//断言
expect（directiveEl.hasClass（'bar'））.toBe（true）；
});

您可以这样编写代码：

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

angular.module（'app'，[]）
.controller（'ctrl'，['$scope'，函数（$scope）{
$scope.myClass=“myClass”；
}])
.directive（'myDirective'，function（）{
返回{
限制：'E'，
作用域：{classToAdd:'@'}，
是的，
替换：正确，
模板：“”，
链接：功能（范围、IELENT、iAttrs）{
console.log（范围）；
控制台日志（iAttrs）；
}
}
})

这是一份工作报告

---

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

顺便说一句，我碰巧喜欢这个标题。：）是的，这基本上就是我在回答中所做的。非常感谢。

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

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

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