Question

这是我在模板中的代码。

    <button ng-click="{{backFunction}}" ng-show="{{backShow}}"> Back </button>
    <button ng-click="{{nextFunction}}" ng-show="{{nextShow}}"> Next </button>

指令代码

directive('navigationButtons', function() {
    return {
        restrict: 'AE',
        templateUrl : 'angular/app/partials/navigationButtons.html',
        scope: {
            backFunction: '@',
            backShow: '@',
            nextFunction: '@',
            nextShow: '@'
        }

        };
})

查看代码（我使用该指令的地方）

<navigation-buttons nextFunction="a.active=true" nextShow="true" backFunction="b.active=false" backShow="true"></navigation-buttons>

显示错误为Syntax Error: Token 'nextFunction' is unexpected

Answer 1

你应该收到＆amp;而不是@

如果你需要双向绑定＆amp;

还接收show = hide with =的布尔值。不想设置$ watch / $ observe

directive('navigationButtons', function() {
    return {
        restrict: 'AE',
        templateUrl : 'angular/app/partials/navigationButtons.html',
        scope: {
            backFunction: '&',
            backShow: '=',
            nextFunction: '&',
            nextShow: '='
        }

        };
})

点击passing functions to directive

上的此链接

修改

还可以查看指令<{3}}

Answer 2

您的代码中有一些错误，首先，在您的模板中，您已更改了分隔符的驼峰案例名称，并删除了大括号

<button ng-click="backFunction()" ng-show="backShow"> Back </button>
<button ng-click="nextFunction()" ng-show="nextShow"> Next </button>

现在在你的指令中替换范围隔离：

directive('navigationButtons', function() {
return {
    restrict: 'AE',
    templateUrl : 'angular/app/partials/navigationButtons.html',
    scope: {
        backFunction: '&',
        backShow: '@',
        nextFunction: '&',
        nextShow: '@'
    }
};

我使用您的代码创建了一个jsfiddle：http://jsfiddle.net/v7V6y/

最佳！

如何在指令中定义两个ng-click函数？

2 个答案: