current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 1 down vote favorite

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.

share|improve this question

2 Answers 2

up vote 4 down vote accepted

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/

share|improve this answer
    
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. –  C1pher Nov 13 '13 at 16:26
    
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. –  Manny D Nov 13 '13 at 17:16
up vote 1 down vote

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>',
    }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.