Question

使用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) + "!");

我能得到的最接近的是将[对象窗口]传递给我的函数。

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，它是由Manny D's创建的，它演示了如何做到这一点。不可否认，对于这个特殊的例子，该指令就变得过度了。

以下是我的示例中的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>',
    }
});

在AngularJS指令中使用属性文本值

2 个答案: