angularjs - 如何使用模型属性作为变量 ng-click

Question

我想在我的模型中将 ng-click 的函数调用存储为字符串。我不能使用 ng-click="m.func"，如果我使用 ng-click="{{m.func}}" 也不起作用。

http://jsfiddle.net/j8wW5/19/

在 ng-click="{{m.func}}" 的情况下，角度 1.2.0 看起来也会引发错误。

我怎样才能把它带到工作中？

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="m in model"><a href="#" ng-click="{{m.func}}">{{m.caption}}</a></div>
</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.model = [
        {
            caption: 'callme a',
            func : 'callme_a()'
        },
        {
            caption: 'callme b',
            func : 'callme_b()'
        }
    ]

    $scope.callme_a = function() {
        alert("called a");
    }

    $scope.callme_b = function() {
        alert("called b");
    }
});

Answer 1

你可以这样做：

在您的 html 中：

<div ng-repeat="m in model"><a href="#" ng-click="call(m)">{{m.caption}}</a></div>

在您的控制器中：

$scope.callme_a = function() {
    alert("called a");
}

$scope.callme_b = function() {
    alert("called b");
}

$scope.model = [
    {
        caption: 'callme a',
        func : $scope.callme_a
    },
    {
        caption: 'callme b',
        func : $scope.callme_b
    }
]

$scope.call = function(el) {
    el.func();   
}

小提琴

Answer 2

这是@Beterraba 答案的变体。

这是小提琴。

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="m in model"><a href="#" ng-click="call(m.func)">{{m.caption}}</a></div>
</div>

JS：

$scope.call = function(func) {
    $scope[func]();
}

如果您必须使用字符串来定义函数，那么这将起作用。但我会敦促你再看看你的设计。

此外，为了使其工作，您必须取出()函数字符串中的 ：

$scope.model = [
    {
        caption: 'callme a',
        func : 'callme_a'
    },
    {
        caption: 'callme b',
        func : 'callme_b'
    }
]

Answer 3

您可以使用

window["functionName"](arguments) //if the functioName is defined in global (window's scope)

或者

$scope["functionName"](arguments) //if the functioName is defined for $scope 

因此，更新的控制器代码（Beterraba）将是

callme_a = function() {
    alert("called a");
}

callme_b = function() {
    alert("called b");
}

$scope.model = [
    {
        caption: 'callme a',
        func : "callme_a"
    },
    {
        caption: 'callme b',
        func : "callme_b"
    }
]

$scope.call = function(el) {
   window[el.func](arguments)
}

Answer 4

可能是 ng-click 在评估为字符串之前使用 ng-click 属性将事件侦听器附加到 dom。

所以，我已经用超时覆盖了 ngclick 以使你想要的工作:)

var app = angular.module('myApp', []); 
app.directive('ngClick', ['$timeout','$parse', function($timeout, $parse) {
          return {
              compile: function($element, attr) {
                  return function(scope, element, attr) {
                      //I've wrapped this link function code in a $timeout
                      $timeout(function() {
                          var fn = $parse(attr["ngClick"]);
                          $(element[0]).on("click", function(event) {
                              scope.$apply(function() {
                                  fn(scope, {$event:event});
                              });
                          });
                      })
                  };
              }
          };
      }]);

（这里是 ngClick 的源代码 - https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js）

使用演示在这里检查小提琴 - http://jsfiddle.net/R2Cc9/5/