werdna357 werdna357 - 1 year ago 81
AngularJS Question

Access external controller function inside directive template

I'm trying to make a directive element that will take an array of json objects and create a series of buttons. To start with, I thought I would try to get working with just a left and a right button. Here's how I'm trying to use it

<div ng-controller="FormCtrl as form">
left-func="form.cancel()" left-text="Reject Call"
right-func="form.submit()" right-text="Accept Call">

And heres the directive code

.directive('buttongroup', function() {
return {
restrict: 'E',

scope: {
leftFunc: '@',
leftText: '@',
rightFunc: '@',
rightText: '@'

template: '<button type="button" ng-click="{{leftFunc}}">{{leftText}}</button><button type="button" ng-click="{{rightFunc}}">{{rightText}}</button>',

This creates the correct html but the
does not work on the buttons. I'm assuming this is because they are in the directive's template scope and are unable to access the FormCtrl functions as

I'm brand new to angular and still trying to figure out how the scoping works so any help would be appreciated.

Adr Adr

You want to invoke the function thus you need to call it. You have a syntax error in your template. It must be like this: Notice how I used the ng-click directive

template: '<button type="button" ng-click="leftFunc()">{{leftText}}</button><button type="button" ng-click="rightFunc()">{{rightText}}</button>'