mikeb February 2016

ng-click in angular directive - pass function from root scope

Fixed the issue, here is the final fiddle that shows it working:

http://jsfiddle.net/mbaranski/tfLeexdc/

I have a directive:

var StepFormDirective = function ($timeout, $sce, dataFactory, $rootScope) {
    return {
        replace: false,
        restrict: 'AE',
        scope: {
            context: "=",
            title: "="

        },
        template: '<h3>{{title}}</h3><form id="actionForm" class="step-form"></form><button ng-click="alert()" type="button">Save</button>',
        link: function (scope, elem, attrs) {
        }
    }
}

How do I make the alert() do something from the controller?

Here is a fiddle: http://jsfiddle.net/mbaranski/tfLeexdc/

Answers


Atticus February 2016

If you'd like to execute a function defined somewhere else, make sure you pass it in by the scope directive attribute.

Here you can do:

scope: {
  context: '=', 
  title: '=',
  alert='&' // '&' is for functions
}

In the place where you using the directive, you'll pass the "expression" of the function (meaning not just the function, but the actual invocation of the function you want to happen when the click occurs.

<step-form-directive alert="alert()" title=".." context=".."></step-form-directive>


cale_b February 2016

Angular can be twitchy, so I've built a whole new fiddle to demonstrate all of the "glue-up" pieces you need to make this work.

First, you weren't passing the properties through to the directive, so I've made that adjustment:

// You have to pass the function in as an attribute
<hello-directive list="osList" func="myFunc()"></hello-directive>

Second, you were using onclick instead of ng-click in your template, which was part of the problem, so I made that switch:

// You need to use "ng-click" instead of "onclick"
template: '<h3>{{list}}</h3><button ng-click="func()" type="button">Button</button>',

And lastly, you need to bind the function in the scope of the directive, and then call it by the bound name:

scope: {
  list: "=",
  // Bind the function as a function to the attribute from the directive
  func: "&"
},

Here's a Working Fiddle

All of this glued up together looks like this:

HTML

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <hello-directive list="osList" func="myFunc()"></hello-directive>
</div>

Javascript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.name = 'Angular Directive';
  $scope.osList = "Original value";
  $scope.stuffFromController = {};
  $scope.myFunc  = function(){ alert("Function in controller");};
};

var HelloDirective = function() {
  return {
    scope: {
      list: "=",
      func: "&"
    }, // use a new isolated scope
    restrict: 'AE',
    replace: false,
    template: '<h3>{{list}}</h3><button ng-click="func()" type="button">Button</button>',
    link: function(scope, elem, attrs) {
      }
  };
};

myApp.directive("helloDirective", Hell 

Post Status

Asked in February 2016
Viewed 1,778 times
Voted 11
Answered 2 times

Search




Leave an answer