AngularJS 在 ng-repeat 中使用范围变量设置 ng-click 函数

Question

我想在 ng-repeat 中为 ng-click 分配不同的功能：

<button ng-repeat="button in notification.buttons" ng-click="button.fn"> {{button.label}} </button>

控制器：

app.controller('MainCtrl', ['$scope', function($scope){
    $scope.notification = {
        ctrl: 'logout', 
        text: 'Logout?',
        buttons: [
                {label:'Yes', fn: 'logout()'},
                {label:'No', fn: 'cancel()'},
        ],
    };
}]);

app.controller('logout', ['$scope', function($scope){
    $scope.logout = function(){
        alert('logout');
    };
    $scope.cancel = function(){
        alert('cancel');
    };
}]);

如果我将 button.fn 放在双花括号 ng-click="{{button.fn}}" 中，生成的 html 在 Chrome 检查器中看起来不错，但 Angular 会抛出以下错误：

错误：[$parse:syntax] 语法错误：令牌 'button.fn' 是意外的， 在表达式 [{{button.fn}}] 开始的第 3 列期待 [:] 在 [button.fn}}]。

如果没有双花括号，则没有错误，但 Angular 会像这样生成 html，并且函数不会触发：

 <button ng-repeat="button in notification.buttons" ng-click="button.fn" class="ng-binding ng-scope"> Yes logout()</button>

PLUNKER

我有一个关于使用范围变量设置 ng-controller 的相关问题，这个例子与 here 相同。

Answer 1

http://plnkr.co/edit/QE50kpfBjXy2WPvjVsJc?p=preview

我已经为您的代码创建了一个分支。您的“fn”引用是字符串。我将它们更改为函数，并将“（）”添加到模板中的“button.fn”中。我还更改了函数引用的位置，因为函数的定义位于不同的控制器中。

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

app.controller('MainCtrl', ['$scope', function($scope){
    $scope.notification = {
        ctrl: 'logout', 
        text: 'Logout?',
        buttons: [
    			{label:'Yes', fn: null},
    			{label:'No', fn: null},
        ],
    };
}]);

app.directive('notification', [
	function() {
		return {
		restrict: 'E', // E = Element, A = Attribute, C = Class, M = coMment
		templateUrl: 'notification.tpl.html',
		replace: true,
		link: function(scope, element, attrs) {
      //...
		}
	};
		
		
}])

app.controller('logout', ['$scope', function($scope){
  $scope.logout = function(){
      alert('logout');
  };
  $scope.cancel = function(){
      alert('cancel');
  };
  
  $scope.notification.buttons[0].fn = $scope.logout;
  $scope.notification.buttons[1].fn = $scope.cancel;
}]);

<div ng-controller="logout">
    <p>{{notification.text}}</p>
    <button ng-repeat="button in notification.buttons" ng-click="button.fn()"> {{button.label}} {{button.fn}}</button>
    <button ng-click="logout()"> Test</button>
</div>