javascript - 请教一个angularjs中在指令调用controller方法的问题-PHP中文网问答

有一个需求，需要在指令中调用指令所在controller里的方法，我举个简单的例子，代码如下：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="directive.js"></script>
</head>
<body ng-controller="myCtrl">
    <my-dir my-click='click()'></my-dir>
</body>
</html>

controller和directive的代码如下：

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

app.controller('myCtrl',function($scope){

    $scope.click= function(param){
        console.log(param);
    }
}
app.directive('myDir',
    function(){
        return {
            restrict:'AE',
            replace: true,
            template: '<input ng-click="inputClick()"></input>',
            scope:{
                myClick : '&'
            },
            link:function(scope,elem,attr){
                scope.inputClick = function(){
                    scope.myClick("123");
                }
            }
        }
    }
);

使用这种方式，倒是可以调用到controller里的click方法，但是参数没法传递过去，打印出来的param始终是undefined，是不是我这种调用方式压根就是错误的啊，那么如何应对这种需求呢，求大神指教，在线等，谢了！！！

.directive("rightclick", ['$parse', function($parse, $scope) { return { restrict: 'A', transclude: true, scope:{ 'rightclick': '&rightclick' }, link: function(scope, element, attrs) { element.bind('contextmenu', function(event) { var fn = $parse(scope.rightclick); //parse it as function scope.$apply(function() { event.stopPropagation(); event.preventDefault(); fn(); }); }); } };

var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.click= function(param){ console.log(param);//123 } } app.directive('myDir', function(){ return { restrict:'AE', replace: true, template: '<input ng-click="inputClick()"></input>', scope:{ myClick : '&' }, link:function(scope,elem,attr){ scope.inputClick = function(){ scope.myClick({param:"123"}); } } } } );

全部回复(5)

巴扎黑2017-04-10 14:53:20 5楼

http://stackoverflow.com/questions/23636727/how-to-call-controller-function-from-directive

赞 +0

添加回复

黄舟2017-04-10 14:53:20 4楼

你需要把scope.myClick parse成一个function, 然后再调用它。

var fn = $parse(scope.myClick); //parse it as function
fn('123') //call the function.

你可以参照一个rightClick directive 的写法：

}])

天蓬老师2017-04-10 14:53:20 3楼

<my-dir my-click='click(param)'></my-dir>

黄舟2017-04-10 14:53:20 2楼

这里需要传参数

template: '<input ng-click="inputClick({param:inputStr})" ng-model="inputStr">'

这里将输入框和指令的作用域中的 param 绑定，同时使用对象的形式传入

scope.inputClick = function(param){
    scope.myClick(param);
}

这里也要传参数。
另外，controller 部分少了一个括号

巴扎黑2017-04-10 14:53:20 1楼

其实关键就在于，你必须在directive中把要回传的数据构造成对象。比如你要回传个someObject对象，你必须回传的{someObject:someObject}才行。不注意这个东西真是坑死人呀，试了好一阵才把数据传到controller中。