Question

我有一个angular指令允许以下列方式传递回调：

angular
    .module('app')
    .directive('myDirective', myDirective);

function myDirective() {
    return {
        bindToController: {
            buttonClick: '&'
        },
        controller: 'MyController',
        controllerAs: 'vm',
        restrict: 'E',
        scope: {},
        templateUrl: '<div><button data-ng-click="vm.buttonClick(\'hello\')">Click me</button>'
    };
}

然后在我的父HTML中，我有

<my-directive button-click="ctrl.myCallback()"></my-directive>

然后终于在我的父控制器中，我有

function myCallback(msg) {
    alert('message is: ' + msg);
}

目标是展示＆＃34;你好＆＃34;或者传递给回调的任何数据，但这不起作用。

我做错了吗？它在没有指定参数时起作用

由于

这里是FYI链接到Plunker（http://plnkr.co/edit/F6TafMWD3EWqVCCLaMys?p=preview）

Answer 1

使用&时，需要使用1参数调用该函数，该参数是您要传递的参数的映射。

<my-directive button-click="ctrl.myCallback(msg})"></my-directive>

return {
    //...
    template: '<div><button data-ng-click="vm.buttonClick({msg: \'hello\'})">Click me</button>'
}

如果你的函数有2个参数，那你就得到：

<my-directive button-click="ctrl.myCallback(msg1, msg2})"></my-directive>

return {
    //...
    template: '<div><button data-ng-click="vm.buttonClick({msg1: \'hello\', msg2: '\'there\'})">Click me</button>'
}

function myCallback(msg1, msg2) {
    alert('message is: ' + msg1 + ' ' + msg2);
}

这个GIST在指令绑定方面非常详尽：https://gist.github.com/CMCDragonkai/6282750

看看第8点

另一个好资源是：https://thinkster.io/egghead/isolate-scope-am

更新：我更新并修复了你的plunkr： http://plnkr.co/edit/W4RnZeCaxfCbVcYeKXLD?p=preview

小心选择角度版本1.x
如果您使用bindToController，您的指令控制器必须是一个函数。空功能正常
仔细查看我如何命名变量以调用myCallback并将其与第二个plunkr进行比较：http://plnkr.co/edit/OvCXC0jeycIOxyoQ0R9w?p=preview如果您需要更多关于此点的解释，请告诉我。

Answer 2

看这个例子。对绑定事件范围使用$ compile

＆＃13;

var app = angular.module('app', []);
app.controller('MyController', function($scope){
    $scope.buttonClick = function(msg ){
      console.log(msg);
       $scope.msg = msg;
    };
}).directive('directive', function($compile) {
    return {
        restrict : 'E',
        link : function(scope, element){
            
                var content = $compile('<div><button type="button" ng-click="buttonClick(' + "'Test Msg'" + ')">Click me</button> {{msg}}')(scope);
                element.append(content);
            
        }
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyController">
   <directive></directive>
</div>

＆＃13;

AngularJS - 在回调中包含变量

2 个答案: