javascript - AngularJS 中的 ng-click、作用域和嵌套指令

Question

我有这些嵌套指令，其中最内部有一个“X”符号，单击该符号时应该删除一个项目(经典问题)。基本上，整个事情就是一个菜单。

我已经在项目的“X”符号/按钮上添加了一个ng-click，但我对如何将整个事情链接回 Controller 感到非常困惑，以便我可以调用deleteItem()函数并实际上删除该项目。我还希望将侧边栏项目的范围分开(此代码的原始版本稍微详细一些并且具有条件语句)

这是我到目前为止所拥有的完整的工作 - 即不真正工作 - 版本可以在这个 jsfiddle 中找到。

以下是 HTML 的相关部分:

<div ng-app="demoApp">
    <div ng-controller="sidebarController">
        <div sidebar>
            <div sidebar-item ng-repeat="item in items" item="item"></div>
        </div>

        <button ng-click="addItem();">Add Item</button>
    </div>
</div>

这是 JavaScript:

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

demoApp.controller("sidebarController", ["$scope", function($scope) {
    $scope.items = [
    ];

    $scope.itemId = 1;
    $scope.addItem = function() {
        var inx = $scope.itemId++;
        $scope.items.push( { id: inx, title: "Item " + inx, subTitle: "Extra content " + inx } );
    };

    $scope.deleteItem = function(item) {
        console.log("Delete this!");
        console.log(item);
    };
}]);

demoApp.directive("sidebar", function() {
    return {
        restrict: "A",
        transclude: true,
        template: '<div><div ng-transclude></div></div>',
        controller: ["$scope", function($scope) {
            this.deleteItem = function(item) {
                $scope.deleteItem(item);
                $scope.$apply();
            };
        }]
    };
});

demoApp.directive("sidebarItem", function() {
    return {
        restrict: "A",
        scope: {
            item: "="
        },
        require: "^sidebar",
        template: '<div><span>{{ item.title }}</span><br /><span>{{ item.subTitle }}</span><br /><span ng-click="deleteItem(item)">X</span></div>',
    };

});

我确信答案很简单，但我就是找不到。

Answer 1

如果你想使用所需的 Controller 函数，你需要将其注入(inject)链接函数

在sidebar-item中添加

link : function (scope, element, attrs, sidebar) { 
  scope.deleteItem = function (item) { 
     sidebar.deleteItem(item);
  }
}