AngularJS 指令回调 [英] AngularJS Directive Callback

查看:26
本文介绍了AngularJS 指令回调的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想通过标签上的参数将调用发送回指令,然后在指令内部适当时调用该方法.例如,当一个按钮被点击时,调用父控制器上的一个方法.

I would like to send a call back into a directive via a parameter on the tag, and then call that method when appropriate inside the directive. For example, when a button was clicked call a method on the parent controller.

我有一个简单的plunker它不起作用

I have a simple plunker of it not working

html 文件:

<body ng-controller="ParentController">
    <h1> Method Arguments </h1>
    <h3> open console to view output</h3>
    <hello-world onLoadCallback="myCallback(arg1)"></hello-world>
</body>

javascript 文件:

javascript file:

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

function ParentController($scope) {
  $scope.myCallback = function(var1){
    console.log("myCallback", var1);
  }
}
app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      template: '<h3>Hello World!!</h3>',
      scope:{
            onLoadCallback: '&'
        },
        link: function(scope, element, attrs, dateTimeController) {
            console.log('linked directive, not calling callback')
            scope.onLoadCallback('wtf');

      }
  };
});

推荐答案

Trickytricky angular,在HTML中声明参数时,需要使用snake case,而不是camelcase来匹配.

Tricky tricky angular, when declaring the argument in the HTML, it needs to use snake case, instead of camelcase to match.

作品:

<hello-world on-load-callback="myCallback(arg1)"></hello-world>

不起作用:

<hello-world onLoadCallback="myCallback(arg1)"></hello-world>

这篇关于AngularJS 指令回调的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆