Question

angular.js上的新内容并且无法弄清楚如何使用templateUrl＆amp; amp;隔离范围。

这是我的控制器

(function(){
angular.module('buttons')
    .controller('buttonController', ['$scope', function($scope){

        //primary button
        $scope.primaryButton = { name: 'Submit'};
})();

以下是我的观点index.html＆amp;

<div class="layoutLeft">
        <p>Primary Button</p>
        <primary-button info="primaryButton"></primary-button>
    </div>

初级button.html

<button class="{{buttonInfo.class}}">{{buttonInfo.name}}</button>

这是我的指示

(function(){
    angular.module('buttons')
        .directive('primaryButton', function() {
            return {
                restrict: 'EA',
                scope: {
                    buttonInfo: '=info'
                },
                templateUrl: 'scripts/local/views/primary-button.html'
            }
        })
    })();

这是我的测试

(function(){
    beforeEach(angular.mock.module('buttons'));
describe('Buttons Directive Test', function(){

    var $compile, $scope, $httpBackend;

    beforeEach(module('templates'));

    beforeEach(inject(function(_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $scope = _$rootScope_.$new();

        $scope.primaryButton = {name: 'Save'};

        elm = angular.element("<primary-button info='buttonInfo'></primary-button>");
        e = $compile(elm)($scope);
        e.digest();
    }));

    it('should do something', function(){
        expect(e.html()).toContain($scope.primaryButton);
    });
});

}）（）;

我正在使用茉莉花和业力来测试，有人可以指导我做错了吗

Answer 1

编辑：这是一个与你的代码正在做的非常接近的plunkr。您修复的问题代码存在多个问题：

http://plnkr.co/edit/QXprEUof2Ps0Vivg4L34?p=preview

在你的测试中，你调用e.digest（），因为你无法消化元素而无法工作......你应该调用$ scope。$ digest。
e.html（）不会包含该JSON blob。我将其解释为希望它包含名称标签......
info ='buttonInfo'将信息绑定到outerscope中的属性buttonInfo，但您将其称为'primaryButton'。将$ scope.primaryButton重命名为$ scope.buttonInfo
你使用了一些并非完全必要的下划线，但是当注入compile时，这并不是什么大问题，
我使用内联模板而不是仅仅为plunkr加载它，加载它没有任何问题
因为你的指令是一个元素，所以我添加了'replace'，它用直接按钮替换了元素。考虑改为将其作为属性。

我的plunkr 通过茉莉花测试和按钮的工作演示。如果您需要更多帮助，请告诉我。祝AngularJS好运。

（OLD ANSWER）

==============

您需要使用类似nghtml2js的内容来加载模板并使模板缓存可用。

using nghtml2js

这是你的第一个问题。第二个问题是通过在编译后调用该元素上的isolateScope（）来完成隔离范围。记录在elem上调用它的结果，你会找到你想要的属性。

e.isolateScope()

Answer 2

不遵循上述答案被标记为已接受的原因。这个问题询问如何使用templateUrl完成，而@ PeterAshwell的答案提供了一个内联HTML 的解决方案，当使用templateUrl 时无效。

要在使用templateUrl时访问隔离范围，必须将isolateScope调用包装在$ timeout中，以允许$ http调用（由templateUrl生成）完成。

代码看起来像：

element = $compile("<myHTML />")($scope)

$timeout(function() {
     expect(element.isolateScope().myProp).toEqual(12);

}), 0 , false);

$timeout.flush();

带有templateUrl＆amp; amp;的角度测试指令隔离范围

2 个答案: