与NG-重复范围内的变量AngularJS集NG-点击功能 [英] AngularJS set ng-click function with scope variables within ng-repeat

问题描述

我想分配不同的功能，NG-重复内NG-点击：

 ＆LT;按钮NG重复=按钮，在notification.buttonsNG点击=button.fn＆GT; {{button.label}}＆LT; /按钮＆GT;
 

控制器：

  app.controller（'MainCtrl'，['$范围'，函数（$范围）{
    $ scope.notification = {
        CTRL：'退出'，
        文字：退出？，
        纽扣： [
                {标号：'是的'，FN：退出（）}，
                {标号：'不'，FN：取消（）}，
        ]
    };
}]）;app.controller（'注销'，['$范围'，函数（$范围）{
    $ scope.logout =功能（）{
        警报（'注销'）;
    };
    $ scope.cancel =功能（）{
        警报（'取消'）;
    };
}]）;
 

如果我在双花括号 NG-点击={{button.fn}}生成的HTML看起来在Chrome督察不错，但角度把button.fn引发以下错误：

  

错误：[$解析：语法]语法错误：令牌'button.fn是一个意外，
  期待[：]的前pression第3栏[{{button.fn}}]启动
  在[button.fn}}]

如果没有双花括号，没有错误，但角生成这样的HTML和功能将不能火：

 ＆LT;按钮NG重复=按钮，在notification.buttonsNG点击=button.fn级=NG结合NG-范围＆GT;是注​​销（）＆LT; /按钮＆GT;
 

PLUNKER

我对设置NG-控制器范围的变量与此非常相同的例子<一个一个相关的问题href=\"http://stackoverflow.com/questions/26410262/angularjs-set-ng-controller-with-scope-variables\">here.

解决方案

的http：/ /plnkr.co/edit/QE50kpfBjXy2WPvjVsJc?p=$p$pview

我已经创建了code的一个分支。您的FN参考是字符串。我他们改为功能，并加入（）到在模板中的'button.fn'。我也改变了那里的函数引用作了以来的函数的定义是在一个不同的控制器。

\r

\r

VAR应用= angular.module（'plunker'，[]）;\r
\r
app.controller（'MainCtrl'，['$范围'，函数（$范围）{\r
    $ scope.notification = {\r
        CTRL：'退出'，\r
        文字：退出？，\r
        纽扣： [\r
    {标号：'是的'，FN：空}，\r
    {标号：'不'，FN：空}，\r
        ]\r
    };\r
}]）;\r
\r
app.directive（'通知'，[\r
功能（）{\r
返回{\r
限制：'E'，// E =元素，A =属性，C =级，M =评论\r
templateUrl：notification.tpl.html'，\r
更换：真实，\r
链接：功能（范围，元素，ATTRS）{\r
      // ...\r
}\r
};\r
\r
\r
}]）\r
\r
app.controller（'注销'，['$范围'，函数（$范围）{\r
  $ scope.logout =功能（）{\r
      警报（'注销'）;\r
  };\r
  $ scope.cancel =功能（）{\r
      警报（'取消'）;\r
  };\r
  \r
  $ scope.notification.buttons [0] .fn = $ scope.logout;\r
  $ scope.notification.buttons [1] .fn = $ scope.cancel;\r
}]）;

\r

＆LT; D​​IV NG控制器=注销＆GT;\r
    ＆所述p为H.; {{notification.text}}＆下; / P＆GT;\r
    ＆LT;按钮NG重复=按钮，在notification.buttonsNG点击=button.fn（）＆GT; {{button.label}} {{button.fn}}＆LT; /按钮＆GT;\r
    ＆LT;按钮NG点击=退出（）＆GT;测试＆LT; /按钮＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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>

PLUNKER

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>

这篇关于与NG-重复范围内的变量AngularJS集NG-点击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！