首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >angularjs指令调用在属性中指定的函数,并向其传递参数

angularjs指令调用在属性中指定的函数,并向其传递参数
EN

Stack Overflow用户
提问于 2013-07-10 03:37:30
回答 5查看 152.7K关注 0票数 103

我想创建一个链接到属性的指令。该属性指定应在作用域上调用的函数。但我还想将一个参数传递给在link函数中确定的函数。

<div my-method='theMethodToBeCalled'></div>

在链接函数中,我绑定了一个jQuery事件,该事件传递需要传递给函数的参数:

app.directive("myMethod",function($parse) {
  restrict:'A',
  link:function(scope,element,attrs) {
     var expressionHandler = $parse(attrs.myMethod);
     $(element).on('theEvent',function( e, rowid ) {
        id = // some function called to determine id based on rowid
        scope.$apply(function() {expressionHandler(id);});
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}

在不传递id的情况下,我可以让它工作,但是一旦我试图传递一个参数,函数就不再被调用

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2013-11-22 02:19:17

马可的solution works well

与推荐的角度方法(如treeface的expressionHandler所示)形成对比的是使用回调表达式,该表达式不需要定义expressionHandler。在marko的示例中,change:

在模板中

<div my-method="theMethodToBeCalled(myParam)"></div>

In指令链接函数

$(element).click(function( e, rowid ) {
  scope.method({myParam: id});
});

与marko的解决方案相比,这确实有一个缺点-在第一次加载时,将在未定义myParam ===的情况下调用theMethodToBeCalled函数。

可以在@treeface Plunker上找到一个工作示例

票数 98
EN

Stack Overflow用户

发布于 2013-07-10 20:20:08

不知道你到底想要做什么。但这里仍然有一个可能的解决方案。

在本地作用域中创建一个具有‘&’属性的作用域。它“提供了一种在父作用域的上下文中执行表达式的方法”(有关详细信息,请参阅directive documentation )。

我还注意到,您使用了一个速记链接函数,并在其中插入了对象属性。你不能这么做。更清楚的是(imho)只返回指令定义对象。请参阅下面的代码。

下面是一个代码示例和一个fiddle

<div ng-app="myApp">
<div ng-controller="myController">
    <div my-method='theMethodToBeCalled'>Click me</div>
</div>
</div>

<script>

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

   app.directive("myMethod",function($parse) {
       var directiveDefinitionObject = {
         restrict: 'A',
         scope: { method:'&myMethod' },
         link: function(scope,element,attrs) {
            var expressionHandler = scope.method();
            var id = "123";

            $(element).click(function( e, rowid ) {
               expressionHandler(id);
            });
         }
       };
       return directiveDefinitionObject;
   });

   app.controller("myController",function($scope) {
      $scope.theMethodToBeCalled = function(id) { 
          alert(id); 
      };
   });

</script>
票数 88
EN

Stack Overflow用户

发布于 2015-11-06 03:11:33

通过使用attrName: "&"引用外部作用域中的表达式,您可以创建一个指令,该指令使用params执行函数调用。

我们希望用ng-click-x替换ng-click指令

<button ng-click-x="add(a,b)">Add</button>

如果我们有这样的作用域:

$scope.a = 2;
$scope.b = 2;

$scope.add = function (a, b) {
  $scope.result = parseFloat(a) + parseFloat(b);
}

我们可以这样写我们的指令:

angular.module("ng-click-x", [])

.directive('ngClickX', [function () {

  return {

    scope: {

      // Reference the outer scope
      fn: "&ngClickX",

    },

    restrict: "A",

    link: function(scope, elem) {

      function callFn () {
        scope.$apply(scope.fn());
      }

      elem[0].addEventListener('click', callFn);
    }
  };
}]);

这是一个现场演示:http://plnkr.co/edit/4QOGLD?p=info

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/17556703

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档