AngularJS：指令制限： 'E'はジャスミンユニットテストで呼び出される要素click（）イベントを防止します

Question

ここには2つの指令と単体テストがあります。

directive('myTestDirective', function() { 
    return { 
     link: function(scope, element, attrs) { 
      element.on("click", function(e) { 
      scope.clicked = true; 
      console.log("clicked"); 
     } 
    } 
}); 

とユニットテスト：

describe('my test directive', function() { 
    beforeEach(function() { 
     ..... 
     inject($compile, $rootScope) { 
      scope = $rootScope.$new(); 
      html = '<div my-test-directive></div>'; 
      elem = angular.element(html); 
      compiled = $compile(elem); 
      compiled(scope); 
      scope.$digest(); 
     } 
    }); 
    it('should set clicked to true when click() is called', function() { 
     elem[0].click(); 
     expect(scope.clicked).toBe(true); 
    }); 
}); 

上記単位テストが実行される

、テストパスとclickedがコンソールに記録され

ここで最初の命令です。しかし、restrict: Eでこのディレクティブを検討

が追加さ：

directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      element.on("click", function(e) { 
      scope.clicked = true; 
      console.log("clicked"); 
     } 
    } 
}); 

とユニットテストを：

describe('my directive', function() { 
    beforeEach(function() { 
     ..... 
     inject($compile, $rootScope) { 
      scope = $rootScope.$new(); 
      html = '<my-directive></my-directive>'; 
      elem = angular.element(html); 
      compiled = $compile(elem); 
      compiled(scope); 
      scope.$digest(); 
     } 
    }); 
    it('should set clicked to true when click() is called', function() { 
     elem[0].click(); 
     expect(scope.clicked).toBe(true); 
    }); 
}); 

このテストが失敗しました。 clickedはコンソールに記録されません。デバッグから私は指示にバインドされた関数click()が実行されていないことがわかります。

restrict : 'E'を引き続き使用しても、単体テストでのクリックをシミュレートする機能は維持できますか？

更新：私はMichal's plunkrのおかげで働いています。

私があると注入（）関数を変更：この後

inject(function($compile, $rootScope, $document) { 
    scope = $rootScope.$new(); 
    html = '<my-test-directive-element></my-test-directive-element>'; 
    elem = angular.element(html); 
    $compile(elem)(scope); 
    scope.$digest(); 
}); 

、両方の属性を制限し、要素作業を制限用いてクリックします。

Plukrはここにある：（「クリック」）にjqLit​​eを使用して http://plnkr.co/edit/fgcKrYUEyCJAyqc4jj7P

Answer 1

は非常に角度っぽいものではなく、私はあなたに追加しますどんなので（それは角度ダイジェストサイクルによって処理されるだろうとは思いませんそのコールバック内のスコープは、手動で行う場合を除いてDOMにレンダリングされません）。

<my-directive ng-click="onClick()"></my-directive> 

とあなたのディレクティブ：あなたは、簡単な `テンプレートを追加する場合

directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     scope.onClick = function() { 
     scope.clicked = true; 
     console.log("clicked"); 
     } 
    } 
    } 
});