AngularJs call controller function from dynamically created element

Question

i have one controller and want to create dymanically element.When i create it the element should call the controller function ,but the function is not called

app.controller('AbnTestController', ['$scope','$timeout',function($scope,$timeout) {
 ..........................
var tree1;
tree1 = [
  {
    label: 'test1',
    id:'1',
    type:'t',

  }];
  return $scope.addnew= function() {
  .........
   something

};

In my directive ,i create dynamic element;

app.directive('mytree', [
'$timeout', function($timeout) {
  return {
    restrict: 'E',
    controller: function($scope) {
      $scope.launch = function (mn) {........something.....}},

     template: "<a ng-click='addnew()'>Click</a>",
    replace: true,
    scope: {
      treeData: '=',
      onSelect: '&',    
      initialSelection: '@',
      treeControl: '='
    } 
    ...........
    }}]);

I want to call 'addnew' function from dynamically created element.

possible duplicate of [Angular: calling controller function inside a directive link function using &](http://stackoverflow.com/questions/16839259/angular-calling-controller-function-inside-a-directive-link-function-using) — CodingIntrigue, Apr 15 '15 at 07:18

score 0 · Answer 1 · answered Apr 15 '15 at 08:00

Each directive has an isolated scope.

That means that the 'addNew' function is not available in the scope the directives template is in.

To accomplish this you can add the following line to the 'scope' property of your directive definition:

addNew: '&'

This will bind the scope property to the one of original scope (see: https://docs.angularjs.org/guide/directive)

Your directive should look like this:

app.directive('mytree', [
 '$timeout', function($timeout) {
  return {
restrict: 'E',
controller: function($scope) {
  $scope.launch = function (mn) {........something.....}},

 template: "<a ng-click='addnew()'>Click</a>",
replace: true,
scope: {
  treeData: '=',
  onSelect: '&',    
  initialSelection: '@',
  treeControl: '=',
  addNew: '&'
} 
...........
}}]);

Hm.. i had a camelCase-Typo.. did you notice it? – Jan Tchärmän Apr 15 '15 at 11:40 — Jan Tchärmän, Apr 15 '15 at 11:40

AngularJs call controller function from dynamically created element

1 Answers1