角控制器未定義

Question

我想在我的指令控制器中創建一些事件處理程序。這裏是指令代碼：

module.exports = function() { 
    return { 
     restrict: 'EA', 
     bindToController: true, 
     scope: { 
      myarticle: '=article' 
     }, 
     controllerAs: 'ctrl', 
     templateUrl: '../../views/draggableArticle.html', 
     link: function(scope, element, attr) { 
     }, 
     controller: function() { 
      this.clicked = function() { 
       alert('clicked'); 
      }; 
      this.dragstartHandler = function() { 
       alert('draged'); 
      }; 
     } 
    }; 
}; 

而我的觀點：

<div draggable="true" ondragstart="ctrl.dragstartHandler($event);" ng-click="ctrl.clicked()"> 
    <h2>{{ctrl.myarticle.webTitle | limitTo: 40}}</h2> 
    <p>{{ctrl.myarticle.blocks.body[0].bodyTextSummary | limitTo: 200}}</p> 
</div> 

當我點擊塊上它的工作原理和警報「點擊」，但是當我拖動一個塊它給了我一個錯誤

Uncaught ReferenceError: ctrl is not defined

Answer 1

ondragstart是本地JS事件從全球窗口範圍，這是不知道需要內發射控制器，而ng-click從控制器的範圍內被觸發。我們可以通過angular.element(this).scope()功能負載所需範圍：

<div draggable="true" 
    ondragstart="angular.element(this).scope().ctrl.dragstartHandler();" 
    ng-click="ctrl.clicked()"> 
    <h2>{{ctrl.myarticle.webTitle | limitTo: 40}}</h2> 
    <p>{{ctrl.myarticle.blocks.body[0].bodyTextSummary | limitTo: 200}}</p> 
</div> 

出於同樣的原因角$事件也將不可用，但你仍然可以使用傳遞給本地函數所有參數。

還有角模塊ngDraggablehttps://github.com/fatlinesofcode/ngDraggable，但它與發射拖動一個問題開始事件 - https://github.com/fatlinesofcode/ngDraggable/issues/89