Javascript 具有隔离作用域的单元测试AngularJS指令-如何获得输出绑定？

我真的需要关于使用隔离范围测试AngularJS指令的建议和指导

假设我有以下指令（有效）：

这是模板URL代码：

<nav class="pageNav">
    <div class="content">
        <h1 ng-if="title">{{ title }}</h1>

        <div class="contentRight" ng-transclude></div>
    </div>
</nav>

使用时，我将

$scope.title

作为属性放在元素上，但这也失败了

---

我发现很少或没有关于使用隔离作用域测试AngularJS指令的好文档，对此我感到非常惊讶。非常感谢您对我遇到的问题提供任何指导、信息或解释。

问题1:设置

$scope.title

（由于某些原因，绑定

{title}}

）

当然，因为您使用的是

标题：'@'

，

@

意味着您使用静态字符串绑定

问题2:

如果您使用的是

templateUrl

，浏览器必须启动ajax请求才能加载模板，这意味着指令的模板尚未加载到当前函数中，必须等待ajax请求完成=>结果不可预测

如图所示，如果我在同一个函数中立即检查已编译的html，我会发现它没有被编译。为了向您展示templateUrl是正确的，稍后将加载，我使用

console.log

和对象引用添加了一个模板URL来证明这一点

如果我使用内联

模板

，如图所示，模板将被替换（但未编译）

问题3:

---

Angular js compile函数未在当前函数中完成，您可能需要使用$timeout将其安排到下一个周期

您是否可以为此创建一个JSFIDLE。它会帮助我们帮助你更快这里有一把原始的小提琴。。。你检查过小提琴工作了吗？我刚刚添加了上面的代码，因为我正在使用karma/jasmine，我希望有人能解释渲染和范围的问题，而不是修改代码。设置

$scope.title

（出于某种原因，绑定

{{title}}

没有渲染）。当然，因为您使用的是

title:'@'

，

@

意味着您使用静态字符串绑定。谢谢，这太好了，我可以问一下，如果我使用title:'='或title:'&'-这是一个单独的question@MikeSav：检查我的更新问题3。如果需要将其与作用域的属性绑定，则应使用

title:'='

谢谢您的帮助，我还有其他使用“=”的测试，它们也不绑定，这就是为什么我问这个问题。

<nav class="pageNav">
    <div class="content">
        <h1 ng-if="title">{{ title }}</h1>

        <div class="contentRight" ng-transclude></div>
    </div>
</nav>

describe('Page Nav Directive', function() {

    var $scope,
        element;

    beforeEach(module('myApp'));
    beforeEach(module('pageNav.html'));

    beforeEach(inject(function($compile, $rootScope) {
        $scope = $rootScope;
        $scope.title = "hey hey, my my";
        element = angular.element('<div page-nav></div>');
        // element = angular.element('<div page-nav title="hey hey, my my"></div>');
        $compile(element)($scope);

        $scope.$digest();
    }));

    it('should render the directive', function() {
       // this test will fail if I un-comment the element above
       expect(element.find('div').eq(1).attr('class')).toBe('contentRight');
    });

    it('should render a title', function() {
        // this test will pass if I un-comment the element above
       expect(element.find('h1').eq(0).text()).toBe('hey hey, my my');
    });

})

;

expect(element.scope().find('div').eq(1).attr('class')).toBe('contentRight');