在ng-click上创建一个动态函数

Question

我有这样一个按钮

<button ng-click="method = 'create'; title = 'Create'>create</button>
<button ng-click="method = 'update'; title = 'Update'>update</button>

和这个

<button ng-click="create(param)">{{ title }}</button>
<button ng-click="update(param)">{{ title }}</button>

上面的代码可以正常工作，但我想让它更加动态化。

所以我将其更改如下。

<button ng-click="{{ method }}(param)">{{ title }}</button>

这不起作用，我不知道为什么，尽管如果我做检查元素，上面的代码会生成如之前所述的正确代码。

- Donny Gunawan

Answer 1

使用括号表示法:

<button ng-click="this[method](param)">{{ title }}</button>

this 指向当前作用域对象，因此使用 this[method] 可以通过变量名访问方法。

- dfsq

Answer 2

这对我没有用...并且...

我不想在我的angular应用程序中处理html代码，也不想使用指令或eval。所以我只是将我的现有函数包装在一个函数中：

$scope.get_results = function(){

    return {
            message: "A message", 
            choice1: {message:"choice 1 message", f: function(){$scope.alreadyDefinedFunction1()}},
            choice2: {message:"choice 2 message", f: function(){$scope.alreadyDefinedFunction2()}},
        };
}

在另一个函数中：

$scope.results2 = $scope.get_results();

在HTML中使用的片段：

<ul class="dropdown-menu scroll-div">
  <li><a ng-click="results2.choice1.f()">{{results_2_menu.choice1.message}}</a></li>
  <li><a ng-click="results2.choice2.f()">{{results_2_menu.choice2.message}}</a></li>
</ul>

这个js fiddle是基于以下内容创建的：http://jsfiddle.net/cdaringe/FNky4/1/

- user2738183

---

这对我有用！然而，被接受的答案却没有。谢谢。 - JoeCodeCreations

Answer 3

这个语法似乎运行良好

<button ng-click="this[method(param)]">{{ title }}</button>

从用户dfsq的建议开始，由于该建议与angularjs 1.6.4不兼容，因此我将闭合括号放在参数值之后。

- user9236526