Using attribute text value in AngularJS directive

Question

Using a YouTube tutorial created by John Lindquist, I was able to create a directive using a template. See fiddle: http://jsfiddle.net/37PSs/

Now, I want to use the value of the attribute as a variable to a function call. Something like this:

html:
    <hello-world name="World"></hello-world>

javascript - directive:
    template: '<span>myFunction({{name}})</span>'

javascript - myFunction(theirName):
    return ("Hello, " + String(theirName) + "!");

The closest I've been able to get is passing an [object Window] to my function.

Manny D · Accepted Answer · 2013-11-12 22:05:41Z

7

You need to wrap your function call in {{}} like so:

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

myApp.directive('helloWorld', function() {
    return {
        restrict: 'E',
        scope: {
            name: '@'
        },
        controller: function ($scope) {
            $scope.myFunc = function (input) {
                return "Hello there, " + input + "!";
            }
        },
        template: '<span>{{myFunc(name)}}</span>',
    }
});

Updated fiddle: http://jsfiddle.net/bh2KY/

answered Nov 12, 2013 at 22:05

Manny D

20.9k2 gold badges31 silver badges31 bronze badges

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

2 Comments

C1pher Over a year ago

I thought I would be able to adapt this solution, but I am having some trouble. Could I use this approach with a template similar to the following? template: '<select><option>' + '{{returnSelectionFromMasterList(country)}}'.join('</option><option>') + '</option></select>', Its supposed to populate a drop-down menu from a list. I've been able to get it to work when I provide a string to the function, but not when I try to use the attribute variable.

Manny D Over a year ago

I would try to use ng-options instead in this case or an ng-repeat on options but otherwise I think the template would still work.

jelinson · Accepted Answer · 2013-11-13 07:54:00Z

Given the nature of your function, the AngularJS way to do this is with a custom filter, since you are just formatting a scope variable. A filter takes in input and modifies it into something presentable; filters can be reused often more easily than a function in a directive's controller scope.

I've created a JSFiddle, built off of the one created by Manny D's, that demonstrates how to do this. Admittedly, for this particular example, the directive then becomes overkill.

Here is the javascript from my example. Note that I am using different modules for the directive and filter, as is good practice.

'use strict';
 var myApp = angular.module('myApp',['myFilters', 'myDirectives']);

angular.module('myFilters', []).filter('my_name', function() {
    return function(name) {
      return "Hello there, " + name + "!";  
    };
});

angular.module('myDirectives', []).directive('helloWorld', function() {
    return {
        restrict: 'E',
        scope: {
            name: '@'
        },
        template: '<span>{{name|my_name}}</span>',
    }
});

Collectives™ on Stack Overflow

Using attribute text value in AngularJS directive

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related