如何使用模型属性作为变量 ng-click [英] how to use a model property as variable ng-click

问题描述

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

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

看起来 angular 1.2.0 在 ng-click="{{m.func}}" 的情况下也会抛出错误.

我怎样才能让它发挥作用?

<div ng-repeat="m in model"><a href="#" ng-click="{{m.func}}">{{m.caption}}</a><;/div>
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.model = [{标题:'callme a',功能:'callme_a()'},{标题:'callme b',功能:'callme_b()'}]$scope.callme_a = function() {alert("叫一个");}$scope.callme_b = function() {警报(称为b")；}});

解决方案

可能是 ng-click 在将事件侦听器附加到具有 ng-click 属性的 dom，然后再将其计算为字符串.

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

var app = angular.module('myApp', []);app.directive('ngClick', ['$timeout','$parse', function($timeout, $parse) {返回 {编译:函数($元素，属性){返回函数(范围，元素，属性){//我已经在 $timeout 中包装了这个链接函数代码$超时(功能(){var fn = $parse(attr["ngClick"]);$(element[0]).on("click", function(event) {范围.$应用(函数(){fn(范围, {$event:event});});});})};}};}]);

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

通过演示检查此处的小提琴 - http://jsfiddle.net/R2Cc9/5/

I'd like to have function calls for ng-click stored as strings in my model. I can't use ng-click="m.func", and if i'm using ng-click="{{m.func}}" ist also not working.

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

It also looks like angular 1.2.0 throws an error in case of ng-click="{{m.func}}".

How can I bring it to work?

<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");
    }
});

解决方案

It could be that ng-click is attaching an event listener to the dom with the ng-click attribute before it's evaluated to a string.

So, I've overridden the ngclick with a timeout to make what you want work :)

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});
                              });
                          });
                      })
                  };
              }
          };
      }]);

(Here is the source code for ngClick - https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js)

Check the fiddle here with the demo - http://jsfiddle.net/R2Cc9/5/

这篇关于如何使用模型属性作为变量 ng-click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！