Question

这是我的HTML页面：

<td ng-repeat="col in input_columns" droppable="true" drop-fn="drop" drop-index="$index" drop-data="col" title="" ng-click="openDialog($event,$index)" tempValue="">&lt;enter data&gt; {{col}} - {{$index}}</td>

这是我的dragAndDrop.js

var app= angular.module('rulesApp');
  app.directive('droppable', function() {
    return {
      restrict: 'A',
      //scope: {dropData: '=dropData',dropIndex: '=dropIndex'},
      link: function(scope, element, attrs) {
      element[0].addEventListener('drop', function(e) {
              //var attr=attrs;
          //var s=scope;
          var f=scope[attrs.dropFn];
         // debugger
          f(e,scope[attrs.dropData],scope[attrs.dropIndex]);//line no. 14
          e.preventDefault();
          e.stopPropagation();

        });
        element[0].addEventListener('dragover', scope.handleDragOver, false);
        element[0].addEventListener('openDialog1', scope.openDialog1, false);
      }
    }
  })

这是我的controller.js

$scope.drop=  function (ev,item,indx) {
        ev.preventDefault();
//some code here
if(true){
            ev.target.innerHTML = data;

            $scope.openDialog1(ev,indx);//error
}
}
$scope.openDialog1 = function($event,item,$index) {
//some code here
}

我想从drop方法调用一个函数openDialog1，它通过指令调用。但是我收到了这个错误

Uncaught TypeError: $scope.openDialog1 is not a function$scope.drop @ controllers.js:1589(anonymous function) @ dragAndDrop.js:14.

任何人都可以帮助我在这里做错了。

Answer 1

您的$scope.openDialog1在被调用后定义。

在Javascript中，与实际函数不同，对象属性不被提升（即使它们被分配给函数）;因此，您需要在其被称为“

”之前移动该属性的初始化。

$scope.openDialog1 = function($event,item,$index) {
    //some code here
};

$scope.drop = function (ev,item,indx) {
    ev.preventDefault();
    //some code here
    if(true){
        ev.target.innerHTML = data;
        $scope.openDialog1(ev,indx);//error
    }
}

Answer 2

对于每个项目/迭代，ng-repeat创建一个新范围。因为你的指令在子范围内，如果你想调用$ scope.openDialog1，你必须使用$ scope。 $ parent .openDialog1（）。

如何从指令调用的函数调用函数

2 个答案: