Question

我现在正试图绕过测试指令并遇到一些奇怪的行为。我的代码如下：

angular.module('tddApp', [])

.directive('oddsButton', function () {
    return {
        template: '<div class="odds-btn"></div>',
        replace: true,
        scope: {
            market1: '=',
            market2: '@'
        }
    };
});

describe('Odds Button Directive Test Suite', function() {
    var $scope,
        scope,
        elem,
        html;

    beforeEach(module('tddApp'));

    beforeEach(function() {
        html = '<div odds-button market1="market" market2="market"></div>';

        inject(function($compile, $rootScope) {
            $scope = $rootScope.$new();
            $scope.market = '2/1';
            elem = angular.element(html);
            $compile(elem)($scope);
            scope = elem.isolateScope();
             scope.$apply();
        });

    });

    it('should be created and replace html', function () {
        expect(elem[0].className).toContain('odds-btn');
    });

    it('should have market in isolate scope', function() {
        expect(scope.market1).toBe('2/1');
        expect(scope.market2).toBe('2/1');
    });
});

当我使用双向绑定将市场传递到隔离范围时＆＃39; =＆＃39;一切都按预期工作，但当我以只读方式通过＆＃39; @＆＃39;它正在获得字符串＆＃39; market＆＃39;而不是父范围值。

http://jsfiddle.net/6dcpo9ad/

非常感谢任何想法

C

Answer 1

当您通过＆＃39; @＆＃39;它真的只会读取属性中传递的VALUE。它不会尝试解决它背后的变量。

因此，您需要告诉angular使用{{}}模式将变量解析为其值。

将html更改为：

html = '<div odds-button market1="market" market2="{{market}}"></div>';

那对我有用。

＆＃39; @＆＃39;之间的区别和＆＃39; =＆＃39;在测试指令时

1 个答案: