Question

我在控制器中有以下功能：

  angular.module('app').controller('BodyController', function(){
    this.click = function(message){
      alert(message);
    }
  })

我想将这个函数传递给指令的隔离范围，用一些特定的参数调用它，类似的东西：

  angular.module('app').directive('custom', function(){
    return {
      restrict: 'A',
      scope: {
        text: '@',
        click: '&click'
      },
      link: function(scope, element){
        //...
        scope.click('Hello, Plunker!');
        //...
      }
    }
  })

我以这种方式传递了这个功能：

<h1 custom text="Hello Plunker!" click="ctrl.click"></h1>

以下是一个示例：http://plnkr.co/edit/4zkxuHJIB3D339h2Oy60?p=preview

不调用该函数。我错过了什么？

提前致谢

Answer 1

通过使用click: '&click'（可以简化为click: '&'），您说内部作用域上的“make click执行'click'属性中的表达式” 。这意味着您需要在表达式中实际调用该方法，而不仅仅是指向它。

<h1 click="ctrl.click()">...</h1>

另一方面，如果你想获得对外部函数的引用然后使用它（例如传递参数），你需要使用它：

scope: {
    click: '='
}

或者只是使用@ michael-zuchetta的解决方案，这对我来说是新的：）

Answer 2

你可以做点什么

 angular.module('app').directive('custom', function(){
    return {
      restrict: 'A',
      scope: {
        text: '@',
        click: '=click'
      },
      link: function(scope, element){
      //  console.dir(scope.click);
      element.bind("click",function(){

         scope.click('Hello, Plunker!');
      });

        element.text('Hello, Plunker!');
      }
    }
  })

在这里，您可以通过点击：'= click'

从父作用域获得点击功能

并绑定该函数以单击该元素。

这里是plnkr http://plnkr.co/edit/Ekw8I6Kg6tDOnIrnv4za?p=preview

或者您可以将参数传递给您的指令，例如http://plnkr.co/edit/mBbZil1jc4El2Jk79ru7?p=preview

Answer 3

这是一个解决方案：

<h1 custom text="Hello Plunker!" click="click(message)"></h1>

添加message参数然后绑定它：

 scope.click({message: "Hello Plunker:"});

这是工作示例： http://jsfiddle.net/u748hLvn/2/

如何将函数处理程序从控制器传递到AngularJs中的指令隔离范围？

3 个答案: