CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
AVK
AVK

Reputation: 645

ng-click, scopes and nested directives in AngularJS

I have these nested directives the very inner of which has an 'X' sign, which is, when clicked, is supposed to delete an item (classic problem). Basically, the whole thing is a menu.

I have added an ng-click to the 'X' sign/button of the item, but i am very confused on how to link this whole thing back to the controller, so that i can call a deleteItem() function and actually remove the item. I also want to have scope for the sidebar-item separated (the original version of this code is slightly more elaborated and has conditional statements)

Here's what i have so far The full working - i.e. not really working - version can be found in this jsfiddle

Here's the relevant part of 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>

And here's the 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>',
    };

});

Im sure the answer is simple, but I just cant find it.

Upvotes: 0

Views: 669

Answers (1)

haki
haki

Reputation: 9759

If you want to use a required controller function you need to inject it into the link function

in sidebar-item add

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

Upvotes: 2

Related Questions