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>

当我点击该块时，它会起作用并发出警告＆＃34;点击＆＃34;，但是当我拖动一个块时它会给我一个错误

未捕获的ReferenceError：未定义ctrl

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>

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

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

角度控制器未定义

1 个答案: