How to pass the function name from the directive declaration in angular js?

Question

I am using angular js. I have created a directive as shown below.

HTML

<table data-ng-table="tableParams">
<tr data-ng-repeat="folder in $data">
    <td data-title="'Template'" data-sortable="'TemplateName'">
        <div 
            data-my-directive=""
            data-templatename="{{folder.TemplateName}}"
            data-changeFunction="changeAbc(folder)" 
            data-saveFunction="saveAbc(folder)" 
            data-cancelFunction="cancelAbc(folder)"
        />
    </td>
</tr>
</table>

Above html is a part of <div data-ng-controller="GridController" /> and the controller will have functions

changeAbc
saveAbc
cancelAbc

and if say I have another controller xyzController i shall have functions like

changeXyz
saveXyz
cancelXyz

Directive

angular.module('folderSettingApp')
    .directive('myDirective', function () {
        return {
            restrict: 'A'
            , templateUrl: '/Scripts/App/Templates/Template.htm'
            , replace: true
            , link: function ($scope, element, attrs) {
                attrs.$observe('templatename', function (value) {
                    element.find('name').text(value);
                });
            }
        };
    });

Some how I need a way to send the names of the save and cancel functions to the directive and then use those names in the data-ng-click of the below input button.

This is because I then can use this directive with multiple controller.

Template

<template-holder>
    <name></name>
    <input 
           type="button" 
           value="save" 
           data-ng-click="use-the-function-name-defined-in-the-html-of-controller" 
    />
</template-holder>

I am not sure if this is possible. Any help will be appreciated.

Do you need to declare the methods from your controller like that? I think the scope is known to your directive: http://plnkr.co/edit/e5eKPpC4fOhJqtMNwClX?p=preview — Jorg, Jun 20 '14 at 07:00
@Jorg I shall be reusing the directive with different controller and each controller may not have same object like `customer` in your example in its scope. — Yasser Shaikh, Jun 20 '14 at 07:52
If you use an isolate scope, [you can do it with the & parameter](http://stackoverflow.com/a/17570515/398606). Also some other ideas on that question that are worth looking at. — Sunil D., Jun 20 '14 at 08:49

score 2 · Accepted Answer · answered Jun 20 '14 at 10:17

You could use isolate scope to bind the directive scope function to the parent controller scope function.

I've wrote a simple example (jsFiddle DEMO), you could try it.

HTML

<h1>Controller 1:</h1>
<div ng-controller="ctrl1">
  <div data-my-directive="" data-save-function="saveAbc"></div>
</div>
<h1>Controller 2:</h1>
<div ng-controller="ctrl2">
    <div data-my-directive="" data-save-function="saveXyz"></div>
</div>

JS

angular.module("myApp",[])
.controller("ctrl1",function($scope){
  $scope.changeAbc = function(){
    alert("function: changeAbc in Controller1 is being invoked");
  }
  $scope.saveAbc = function(){
    alert("function: saveAbc in Controller1 is being invoked");
  }
})
.controller("ctrl2",function($scope){
  $scope.changeXyz = function(){
    alert("function: changeXyz in Controller2 is being invoked");
  }
  $scope.saveXyz = function(){
    alert("function: saveXyz in Controller2 is being invoked");
  }
}).
directive("myDirective",function(){
  return {
        restrict: 'A', 
        template: '<input type="button" value="save" data-ng-click="saveFunction()"/>',
        replace: true,
        scope:{
            changeFunction:"=",
            saveFunction:"="
        }
    };
});

perfect ! just wot i need... ran into this beautiful article here - http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope before I could check your answer. Anyways thankyou :) — Yasser Shaikh, Jun 20 '14 at 10:36

How to pass the function name from the directive declaration in angular js?

1 Answers1