角度控制器未定义答案

【问题标题】：Angular controller is not defined角度控制器未定义
【发布时间】：2016-09-17 18:38:13
【问题描述】：

我想在我的指令控制器中创建一些事件处理程序。这是指令代码：

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

【问题讨论】：

标签： javascript angularjs events dom-events

【解决方案1】：

ondragstart 是从全局 window 范围内触发的原生 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>

出于同样的原因，角度 $event 也无法使用，但您仍然可以使用传递给本机函数的所有参数。

还有角度模块 ngDraggable https://github.com/fatlinesofcode/ngDraggable，但它在触发拖动开始事件时存在问题 - https://github.com/fatlinesofcode/ngDraggable/issues/89

【讨论】：