Question

我试图从指令调用控制器函数，以更新哈希映射中的计数器。

在阅读了几个解决方案后，我最终做到了这一点：

'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);
        }
    }
});

它可以工作并做我想要的，但我不知道这种方法是否正确。是吗？

我也尝试使用控制器访问函数 updateItemCounter ，但是哈希映射没有得到更新，每次调用函数时都具有相同的值。

Answer 1

在html中你应该设置如下属性：

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

在指令中，如果你想调用控制器的功能，你应该像这样调用它。请注意，传递的对象的属性名称必须与html中使用的相同

link : function(scope, element, attrs, DragDropCtrl) {
  ...
  scope.updateItemCounter({itemId: item.id}); 
  ...
}

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

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

并致电：

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

阅读以下答案：

从指令访问控制器函数来更新HashMap

1 个答案: