AngularJS - 在ng-click中使用数据绑定{{}}

时间:2014-04-28 19:31:31

标签: javascript angularjs data-binding single-page-application angularjs-ng-click

有没有办法动态更改ng-click调用的方法?

这样的事情:

ng-click = "{{functionCalled}}"

然后通过以下方式声明函数:

$scope.functionCalled = "callThisFunction(param)";

2 个答案:

答案 0 :(得分:8)

docs开始,ngClick只评估范围上下文中的表达式。没有什么可以阻止你动态引用函数,但我不确定这是否是预期的方法。我可能会显式调用一个函数,并根据参数切换行为,而不是ng-click='myFunction(myParams)'。尽管如此,这是你要完成什么的一个例子。 http://jsfiddle.net/8cvGt/2/

HTML

<div ng-app='foo' ng-controller='ctrl'>
    <div ng-click='this[myVar]()'>{{ bar }}</div>
</div>

的JavaScript

var app = angular.module('foo',[]).controller('ctrl',function($scope) {
    $scope.myVar = 'callIt';
    $scope.bar = 'before';
    $scope.callIt = function() {
        $scope.bar = 'after';
    }
});

答案 1 :(得分:3)

假设您有可能功能的设置列表,请使用中央功能将呼叫分派给其他功能。

ng-click="dispatchFunction(param)"

然后

$scope.functionToCall = 'callThisFunction';

$scope.dispatchFunction = function(param) {
    switch($scope.functionToCall) {
         case (callThisFunction): callThisFunction(param);
    };

修改:实际上,请使用完整的调度表:

http://designpepper.com/blog/drips/using-dispatch-tables-to-avoid-conditionals-in-javascript