请教一个angularjs中在指令调用controller方法的问题

LittleDouBi
  • 281

有一个需求,需要在指令中调用指令所在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,是不是我这种调用方式压根就是错误的啊,那么如何应对这种需求呢,求大神指教,在线等,谢了!!!

回复
阅读 17.2k
6 个回答

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

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

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

.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();
                });
            });
    }

};

}])

wqs1010
  • 1
新手上路,请多包涵
<my-dir my-click='click(param)'></my-dir>
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"});
                }
            }
        }
    }
);
<my-dir my-click='click(param)'></my-dir> 

这里需要传参数

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

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

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

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

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

紫色的的云
  • 2
新手上路,请多包涵

<div hello keyword="pageData.keyword" on-select-item="pageData.selected(val)"></div>
如果你html是这样的,那么你指令里面一定要这样写才可以(部分代码)

scope : {
    onSelectItem:"&"
},
link : function(scope, element, attrs) {
    scope.onSelect = function (val) {
        scope.onSelectItem({val:val});
    }
},
controller:function ($scope,$timeout,$sce) {
    $scope.choosed=function (val) {
        scope.onSelect(val);
    };
}
宣传栏