Angularjs 从指令访问控制器函数以更新哈希映射

我试图从指令调用控制器函数，以便更新散列映射中的计数器

在阅读了一些解决方案后，我最终做了以下工作：

'use strict';

var dragDropApp = angular.module('dragDropApp', []);

dragDropApp.controller('DragDropCtrl', function($scope) {
    $scope.itemCount = {
        'item1' : {
            'count' : 0
        },
        'item2' : {
            'count' : 0
        },
        'item3' : {
            'count' : 0
        }
    };

    //this.updateItemCounter = function(itemId) {
    //    $scope.itemCount[itemId].count++;
    //}
    $scope.updateItemCounter = function(itemId) {
        $scope.itemCount[itemId].count++;
    }
}

dragDropApp.directive('droppable', function() {
    return {
        restrict : 'A',
        scope : {
            drop : '&', // parent
            bin : '=' // bi-directional scope
        },
        controller : 'DragDropCtrl',
        link : function(scope, element, attrs, DragDropCtrl) {
            var el = element[0];

            el.addEventListener('drop', function(e) {
                var item = document.getElementById(
                    e.dataTransfer.getData('Text')).cloneNode(true);

                //DragDropCtrl.updateItemCounter(item.id);
           >>>> scope.$parent.updateItemCounter(item.id); <<<<

                return false;
            }, false);
        }
    }
});

“严格使用”；
var dragDropApp=angular.module（'dragDropApp'，[]）；
dragDropApp.controller（'DragDropCtrl'，函数（$scope）{
$scope.itemCount={
“项目1”：{
“计数”：0
},
“项目2”：{
“计数”：0
},
“项目3”：{
“计数”：0
}
};
//this.updateItemCounter=函数（itemId）{
//$scope.itemCount[itemId].count++；
//}
$scope.updateItemCounter=函数（itemId）{
$scope.itemCount[itemId].count++；
}
}
dragDropApp.directive（'droppable'，function（）{
返回{
限制：“A”，
范围：{
删除：'&'，//父项
bin:'='//双向作用域
},
控制器：“DragDropCtrl”，
链接：函数（范围、元素、属性、DragDropCtrl）{
var el=元素[0]；
el.addEventListener（'drop'，函数（e）{
var item=document.getElementById(
e、 dataTransfer.getData（'Text'））.cloneNode（true）；
//DragDropCtrl.updateItemCounter（item.id）；
>>>>scope.$parent.updateItemCounter（item.id）；在html中，您应该设置如下属性：

<div droppable bin="something" drop="updateItemCounter(itemId)"></div>

如果希望传递更多参数，则应在html中使用：

<div droppable drop="updateItemCounter(itemId, param2, param3)"></div>

阅读以下答案：




问题是我不想将updateItemCounter函数绑定到任何属性。我只想从指令的事件侦听器函数内部调用它。您可能需要在
scope.$parent.updateItemCounter（item.id）；
scope.$parent.updateItemCounter（item.id）之后调用
scope.$parent.updateItemCounter（item.id）
已经在做我想做的事情。问题是，我是否遵循了正确的方法？还是应该遵循您发布的答案中所述的方法？使用
$parent
是不好的。您永远不知道“谁是$parent”例如，如果您执行
功能，则可在
作用域上使用。$parent.$parent.$parent.updateItemCounter
（因为
ng如果
创建新的子作用域）。最好按照我在回答中描述的方式执行。好的，然后我将相应地更改代码！谢谢：）最佳实践是将回调函数定义为指令的属性，如@akn的回答所示。将指令连接到具有
作用域的特定父函数。$parent
会降低指令的通用性。请遵循
ng click
的示例。如果它调用了具有
作用域的特定函数。$parent
，我们将如何处理那会是什么？
<div droppable drop="updateItemCounter(itemId, param2, param3)"></div>

scope.updateItemCounter({itemId: item.id, param2: 'something', param3: 'something'});