Question

我有这些嵌套的指令，其内部有一个'X'符号，当点击时，它应该删除一个项目（经典问题）。基本上，整个事情是一个菜单。

我已经在项目的“X”符号/按钮上添加了一个ng-click，但是我对如何将整个事物链接回控制器非常困惑，因此我可以调用deleteItem（）函数和实际上删除该项目。我还希望将sidebar-item的范围分开（此代码的原始版本稍微详细一些并具有条件语句）

这是我到目前为止所拥有的完整的工作 - 即不是真正有用的 - 可以在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

如果要使用所需的控制器功能，则需要将其注入链接功能

在sidebar-item添加

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

AngularJS中的ng-click，scopes和嵌套指令

1 个答案: