2

使用 John Lindquist 创建的 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] 传递给我的函数。

4

2 回答 2

7

您需要{{}}像这样包装函数调用：

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/

于 2013-11-12T22:05:41.877 回答
2

鉴于您的函数的性质，AngularJS 执行此操作的方法是使用自定义过滤器，因为您只是在格式化范围变量。过滤器接收输入并将其修改为可呈现的东西；过滤器可以比指令控制器范围内的函数更容易地重用。

我创建了一个JSFiddle，它基于 Manny D 的创建，演示了如何执行此操作。诚然，对于这个特定的示例，该指令变得过大了。

这是我的示例中的 javascript。请注意，我对指令和过滤器使用了不同的模块，这是一种很好的做法。

'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>',
    }
});
于 2013-11-13T07:54:00.177 回答