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

【问题标题】：How to define two ng-click functions in a directive?如何在指令中定义两个 ng-click 函数？
【发布时间】：2014-07-23 23:51:04
【问题描述】：

这是我在模板中的代码。

    <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

【问题讨论】：

您正在使用“@”定义隔离范围，而我认为一个指令只能有一个隔离范围
@aokaddaoc false，您可以拥有多个独立作用域。

标签： javascript angularjs angularjs-directive angular-ui-bootstrap

【解决方案1】：

你应该收到带有 & 而不是 @ 的函数

如果您需要两种方式绑定并且不想设置 $watch/$observe，还可以使用 = 接收显示/隐藏的布尔值

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

        };
})

在passing functions to directive上查看此链接

编辑

还可以在指令上查看 great article

【讨论】：

我进行了这些更改，但仍然显示相同的错误。 :-(
你能设置 plunker，我会尽力解决问题

【解决方案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/

最好的！

【讨论】：

何时使用/不使用{{}} ?
这取决于您使用的指令。如果指令需要字符串，则需要使用 {{ var }}，但如果指令需要表达式，则不应使用 {{ }}。例如：指令 ngClick、ngShow、ngIf 需要一个表达式，但指令 ngSrc 需要一个字符串。