角控制器未定义

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