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

问题描述

我在控制器中具有以下功能:

I have the following function in controller:

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

我想将此函数传递到指令的隔离范围中，以使用一些特定的参数来调用它，诸如此类:

I want to pass this function into directive's isolated scope to call it with some specific params, something like that:

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

我以这种方式传递了该功能:

And I pass thefunction in this way:

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

这里是一个示例: http://plnkr.co/edit/4zkxuHJIB3D339h2Oy60?p=preview

不调用该函数.我想念什么?

The function is not called. What am I missing?

预先感谢

推荐答案

您可以做类似

 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'

here you get click function from parent scope by click: '=click'

并绑定该功能以单击该元素.

and bind that function to click on the element.

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

或者您可以像这样 http://plnkr.co/一样将参数传递到指令中编辑/mBbZil1jc4El2Jk79ru7?p =预览

这篇关于如何将函数处理程序从控制器传递到AngularJs的指令隔离范围中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！