如何将变量中的 ng-click 可执行操作 (&) 传递给指令? [英] How to pass ng-click executable action (&) in variable into directive?

问题描述

带有指令的 HTML 视图:

<div click aaa="aaa()" action="action"></div>

控制器:我喜欢在 $scope.action 中传递函数 bbb():

app.controller('MainCtrl', function($scope) {$scope.aaa = function () { alert('aaa');}$scope.bbb = function () { alert('bbb');}$scope.action = 'bbb()';});

指令:

app.directive('click', function () {返回 {范围: {aaa: '&',动作:'&'},模板:'<button ng-click="aaa()">显示 aaa(工作正常)</button>'+'<button ng-click="action">show bbb (不工作)</button>'+'<br>如何将变量中的 ng-click 操作传递到指令中?}});

我不知道如何评估要替换为 bbb() 的 action.

这里是 plunker:http://plnkr.co/edit/d8DtsNARKPPJwk2SO2WJ

解决方案

$scope.action 需要是一个指向 $scope.bbb 的指针，而不仅仅是一个字符串松散地指代它."bbb() 在控制器中没有任何意义，而 $scope.bbb() 是您创建并需要使用的.当您在 HTML 中时，$scope 是隐含的，这就是为什么您只需编写 aaa() 就可以逃脱.

在您的模板和 HTML 中，您还需要调用 action，就像调用 aaa 一样.

http://jsfiddle.net/DFcJf/

HTML

<div click aaa="aaa()" action="action()"></div>

JavaScript

var app = angular.module('app', []);app.directive('click', function () {返回 {范围: {aaa: '&',动作:'&'},模板:'<button ng-click="aaa()">显示 aaa(工作正常)</button>'+'<button ng-click="action()">show bbb (不工作)</button>'+'<br>如何将变量中的 ng-click 操作传递到指令中?}});app.controller('MainCtrl', function($scope) {$scope.aaa = function () { alert('aaa');}$scope.bbb = function () { alert('bbb');}$scope.action = $scope.bbb;});

HTML view with directive:

<div click aaa="aaa()" action="action"></div>

Controller: I like to pass function bbb() in $scope.action:

app.controller('MainCtrl', function($scope) {
    $scope.aaa = function () { alert('aaa'); }
    $scope.bbb = function () { alert('bbb'); }

    $scope.action = 'bbb()';
});

Directive:

app.directive('click', function () {
    return {
        scope: {
            aaa: '&',
            action: '&'
        },
        template: 
            '<button ng-click="aaa()">show aaa (work ok)</button>' +
            '<button ng-click="action">show bbb (not work)</button>' +
            '<br>How to pass ng-click action in variable into directive?'
    }
});

I don't know how to evaluate action to be replaced with bbb().

here is plunker: http://plnkr.co/edit/d8DtsNARKPPJwk2SO2WJ

解决方案

$scope.action needs to be a pointer to $scope.bbb and not just a string that refers to it loosely. "bbb() in the controller means nothing, while $scope.bbb() is what you created and need to use. When you're in HTML, $scope is implied, which is why you can get away with simply writing aaa().

In your template and your HTML, you also need to call action, just as you are calling aaa.

http://jsfiddle.net/DFcJf/

HTML

<div ng-app="app" ng-controller="MainCtrl">
    <div click aaa="aaa()" action="action()"></div>

</div>

JavaScript

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

app.directive('click', function () {
    return {
        scope: {
            aaa: '&',
            action: '&'
        },
        template: 
            '<button ng-click="aaa()">show aaa (work ok)</button>' +
            '<button ng-click="action()">show bbb (not work)</button>' +
            '<br>How to pass ng-click action in variable into directive?'
    }
});
app.controller('MainCtrl', function($scope) {
    $scope.aaa = function () { alert('aaa'); }
    $scope.bbb = function () { alert('bbb'); }

    $scope.action = $scope.bbb;
});

这篇关于如何将变量中的 ng-click 可执行操作 (&) 传递给指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！