ng-click, scopes and nested directives in AngularJS

Question

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.

haki · Accepted Answer · 2014-06-23 13:19:25Z

2

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

answered Jun 23, 2014 at 13:19

haki

9,81115 gold badges67 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AVK Over a year ago

I've modified jsfiddle as you suggested, but it doesnt seem to work yet. Please advise

haki Over a year ago

Your error is not realted to this issue. Remove $scope.$apply from sidebar deleteItem function.

AVK Over a year ago

Btw, can you explain, why the $apply function is unnecessary in this case?

haki Over a year ago

$scope.$apply is used to introduce changes made to variables outside the context of angular (events for example). ng-click is executed within the context of angular there for it does not require an explicit apply.

Collectives™ on Stack Overflow

ng-click, scopes and nested directives in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related