0

我試圖讓我的頭在目前的測試指令中遇到一些奇怪的行爲。我的代碼如下:測試指令時'@'和'='之間的區別

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

當我在市場上通過使用2路結合「=」一切正常的分離範圍,但是當我通過爲只讀「@」它得到的字符串「市場'而不是父範圍值。

http://jsfiddle.net/6dcpo9ad/

任何想法非常讚賞

Ç

回答

1

當你通過它「@」這真的只是要讀的屬性傳遞的值。它不會試圖解決它背後的變量。

所以你需要通過{{}}模式來告訴角度來解決變量的值。

的HTML改成這樣:

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

這對我的作品呢。

+1

你是對的,當然。笨! – Cathal 2014-10-08 14:41:27

相關問題