angular js: call parent controller method from directive

Question

I use tree grid plugin (from this link: https://github.com/khan4019/tree-grid-directive)

and i custom i little bit it's template:

.directive('treeGrid', [
    '$timeout', function($timeout) {
      return {
        restrict: 'E',
        template: 
          "<div class=\"table-responsive\">\
            <table id=\"policies\" class=\"table table-striped\">\
                <colgroup>\
                    <col width=\"10%\" />\
                    <col width=\"70%\" />\
                    <col width=\"1%\" />\
                    <col width=\"1%\" />\
                </colgroup>\
                <thead>\
                    <tr>\
                        <th>Category</th>\
                        <th>Content</th>\
                        <th></th>\
                        <th></th>\
                        <th></th>\
                    </tr>\
                </thead>\
                <tbody>\
                    <tr ng-repeat=\"row in tree_rows | filter:{visible:true} track by row.branch.uid\" ng-class=\"'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')\">\
                    <td class=\"text-primary\"><a ng-click=\"user_clicks_branch(row.branch)\"><i ng-class=\"row.tree_icon\"ng-click=\"row.branch.expanded = !row.branch.expanded\"class=\"indented tree-icon\"></i></a>\
                    <span class=\"indented tree-label\" ng-click=\"user_clicks_branch(row.branch)\"> {{row.branch[expandingProperty]}}</span></td>\
                    <td ng-bind-html=\"row.branch[colDefinitions[2].field]\"></td>\
                    <td> <a href=\"javascript:void(0)\" ng-click=\"editContent(row.branch)\" data-toggle=\"modal\" data-target=\"#new-content\" class=\"action\"><i class=\"glyphicon glyphicon-edit\"></i></a> </td>\
                    <td> <a ng-click=\"deleteContent(row.branch.Id)\" class=\"action\"><i class=\"glyphicon glyphicon-remove-circle\"></i></a> </td>\
                    </tr>\
                </tbody>\
            </table>\
        </div>",
        replace: true,
        scope: {
          treeData: '=',
          colDefs:'=',
          expandOn:'=',
          onSelect: '&',
          deleteContent: '&',
          editContent: '&',
          initialSelection: '@',
          treeControl: '='
        },

and such controller:

.controller('ContentCtrl', ['$http', '$scope', '$location', '$localStorage', 'authService', 'settings', function ($http, $scope, $location, $localStorage, authService, settings) {

  $scope.deleteContent = function(){
      console.log("delete");

    };
  }]);

and view:

<tree-grid tree-data="policies"></tree-grid>

but when i click on my delete link, i get nothing, it didn't go to controller scope functions (

but why? what i do wrong?

i could write in dirty way this functions in directive, but this is a bad idea ((

how to solve it?

Problem is with the weird syntax of function binding implementation in angular. If you want to pass any arguments you would need to do so by using object representation doing deleteContent({id: row.branch.Id}) in your directive template, while consuming it <tree-grid tree-data="policies" delete-content="deleteContent(id)"></tree-grid> and just get the id now in your controller method as argument, i.e $scope.deleteContent = function(id){console.log("delete for id:" + id);}; — PSL
– PSL, Commented Dec 26, 2014 at 17:37

Patrick · Accepted Answer · 2014-12-26 18:11:31Z

1

Since the treeGrid directive uses an isolate scope, it cannot "see" the deleteContent unless you pass it in through the template.

To fix, you need to pass in the function when defining the directive in the template:

<tree-grid tree-data="policies" delete-content="deleteContent(branch)"></tree-grid>

The function can take any values defined on current scope. Here it is taking branch. This can be passed in from the isolate scope by doing the following in the template of the directive:

...
<td> <a ng-click=\"deleteContent({branch: row.branch})\" class=\"action\"><i class=\"glyphicon glyphicon-remove-circle\"></i></a> </td>\
...

I am passing the entire branch instead of just the id. This is special syntax to be used within directives that take & isolate scope values and binds the branch parameter (used in the tree-grid directive definition) to the row.branch from the directive template. Note: branch inside tree-grid must match the property name of the object used inside the directive template (e.g. {branch: row.branch}).

Here is a fiddle passing the deleteContent to the directive. It logs to the console when the link is clicked.

If this is just functionality that will remain static for the directive, you can just put it into a link function in the directive:

Inside the directive:

link: function (scope, element, attrs) {
   //...
   scope.deleteContent = function () {
       console.log("Content deleted");
   }
   //...
}

edited Dec 26, 2014 at 18:11

answered Dec 26, 2014 at 16:36

Patrick

6,9783 gold badges25 silver badges31 bronze badges

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

8 Comments

byCoder Over a year ago

deleteContent: '&' -it was in my question! If this is just functionality that will remain static for the directive - no, there i have huge logic

byCoder Over a year ago

i need something like scope.deleteContent = function () { parent.deleteContent(); }

Patrick Over a year ago

Updated answer. deleteContent needs to be passed in using snake case in the template. Don't use parent.deleteContent() -- that way is dirty.

byCoder Over a year ago

ok, is good, but one more question: delete-content="deleteContent()" - what if in deleteContent() i must pass some parameters? how to be than?

byCoder Over a year ago

i mean if in directive tmpl i have: ` <a ng-click=\"deleteContent(row.branch.Id)\" class=\"action\"><i class=\"glyphicon glyphicon-remove-circle\"></i></a> ` how to be then? imust path to function some var, how to be here delete-content="deleteContent() ???

|

Steven Weng · Accepted Answer · 2014-12-26 17:34:43Z

0

You could research AngularJS event knowledge. Key words are $broadcast(name, args);,$emit(name, args);,$on(name, listener);.

On your problem you can use this solution:

Controller:

.controller('ContentCtrl', ['$http', '$scope', '$location', '$localStorage', 'authService', 'settings', function ($http, $scope, $location, $localStorage, authService, settings) {

    $scope.deleteContent = function(){
        console.log("delete");
        $scope.$broadcast('deleteContentEvent',yourParams...);
    };
}]);

Directive:

.directive('treeGrid', [
    '$timeout','$rootScope', function($timeout,$rootScope) {
     $rootScope.$on('deleteContentEvent',function(event,yourParams...){
         // do delete
     });
     ...

answered Dec 26, 2014 at 17:34

Steven Weng

3221 silver badge9 bronze badges

1 Comment

Patrick Over a year ago

This would not work. One, you are subscribing to the event on $rootScope but $broadcasting it from directive scope. $broadcast goes "downward" and would not go "up" to $rootScope. Second, the delete comes from within the directive and not the controller, so controller wouldn't know when to signal the event.

Collectives™ on Stack Overflow

angular js: call parent controller method from directive

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related