javascript - 未定义 Angular Controller

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

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>

当我单击该块时，它会工作并警告“已单击”，但是当我拖动一个块时，会给我一个错误


  未捕获的ReferenceError：未定义ctrl

最佳答案

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>

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

还有一个角度模块ngDraggable https://github.com/fatlinesofcode/ngDraggable，但是它与触发拖动开始事件-https://github.com/fatlinesofcode/ngDraggable/issues/89有关