Использование текстового значения атрибута в директиве AngularJS

Question

Используя учебник YouTube, созданный Джоном Линдквистом, я смог создать директиву с использованием шаблона. См. Скрипту: http://jsfiddle.net/37PSs/

Теперь я хочу использовать значение атрибута в качестве переменной для вызова функции. Что-то вроде этого:

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

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

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

Ближайшим, с которым я смог добраться, является передача объекта [object Window] в мою функцию.

Answer 1

Вам нужно обернуть вызов функции в {{}} так:

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>', 
    } 
}); 

Обновлено скрипку: http://jsfiddle.net/bh2KY/

Answer 2

Учитывая характер вашей функции, то AngularJS способ сделать это с custom filter, так как вы просто форматируете переменную области видимости. Фильтр принимает вход и изменяет его на нечто презентабельное; фильтры могут быть повторно использованы чаще, чем функция в области контроллера.

Я создал JSFiddle, построенный из созданного Мэнни Д'а, который демонстрирует, как это сделать. Разумеется, для этого конкретного примера директива тогда становится излишней.

Вот javascript из моего примера. Обратите внимание, что я использую разные модули для директивы и фильтра, как и 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>', 
    } 
});