AngularJS 使用 ng-repeat 中的范围变量设置 ng-click 函数 [英] AngularJS set ng-click function with scope variables within ng-repeat
问题描述
我想在 ng-repeat 中为 ng-click 分配不同的功能:
控制器:
app.controller('MainCtrl', ['$scope', function($scope){$scope.notification = {ctrl: '退出',text: '退出?',纽扣: [{label:'Yes', fn: 'logout()'},{标签:'否',fn:'取消()'},],};}]);app.controller('logout', ['$scope', function($scope){$scope.logout = function(){警报('退出');};$scope.cancel = function(){警报('取消');};}]);
如果我把 button.fn 放在双卷曲 ng-click="{{button.fn}}"
生成的 html 在 Chrome 检查器中看起来不错,但 Angular 会抛出以下错误:
错误:[$parse:syntax] 语法错误:令牌button.fn"是意外的,期望 [:] 在表达式 [{{button.fn}}] 的第 3 列开始在 [button.fn}}].
如果没有双卷曲,没有错误,但是Angular会像这样生成html并且函数不会触发:
我有一个关于使用范围变量设置 ng-controller 的相关问题,示例相同 此处.
http://plnkr.co/edit/QE50kpfBjXy2WPvjVsJc?p=preview
我已经创建了一个你的代码的分支.您的fn"引用是字符串.我将它们更改为函数,并将()"添加到模板中的button.fn".我还更改了函数引用的位置,因为函数的定义在不同的控制器中.
var app = angular.module('plunker', []);app.controller('MainCtrl', ['$scope', function($scope){$scope.notification = {ctrl: '退出',text: '退出?',纽扣: [{label:'Yes', fn: null},{label:'No', fn: null},],};}]);app.directive('通知', [功能() {返回 {限制:'E',//E = 元素,A = 属性,C = 类,M = 评论templateUrl: 'notification.tpl.html',替换:真的,链接:函数(范围,元素,属性){//...}};}])app.controller('logout', ['$scope', function($scope){$scope.logout = function(){警报('退出');};$scope.cancel = function(){警报('取消');};$scope.notification.buttons[0].fn = $scope.logout;$scope.notification.buttons[1].fn = $scope.cancel;}]);
<p>{{notification.text}}</p><button ng-repeat="notification.buttons 中的按钮" ng-click="button.fn()">{{button.label}} {{button.fn}}</button><button ng-click="logout()">测试按钮>
I would like to assign different functions to ng-click within ng-repeat:
<button ng-repeat="button in notification.buttons" ng-click="button.fn"> {{button.label}} </button>
Controllers:
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');
};
}]);
If I put button.fn in double curlies ng-click="{{button.fn}}"
the generated html looks good in the Chrome inspector, but Angular throws the following error:
Error: [$parse:syntax] Syntax Error: Token 'button.fn' is unexpected, expecting [:] at column 3 of the expression [{{button.fn}}] starting at [button.fn}}].
If there are no double curlies, no error, but Angular generates the html like this and the functions won't fire:
<button ng-repeat="button in notification.buttons" ng-click="button.fn" class="ng-binding ng-scope"> Yes logout()</button>
I have a related question about setting ng-controller with scope variables with this very same example here.
http://plnkr.co/edit/QE50kpfBjXy2WPvjVsJc?p=preview
I've created a fork of your code. Your 'fn' reference were strings. I changed them to functions, and added '()' to the 'button.fn' in the template. I also changed where the function references were made since the definitions of the functions were in a different controller.
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>
这篇关于AngularJS 使用 ng-repeat 中的范围变量设置 ng-click 函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!