问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
LittleDouBi
    2814713

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

    angularjsjavascript
    阅读 19.1k
    6 个回答
    得票最新
    头像
    Chobits
      7.4k2827
      ✓ 已被采纳
      头像
      mengfeng
        17411

        你需要把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
          11
          新手上路，请多包涵
          <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"});
                }
            }
        }
    }
);
          头像
          0x822a5b87
            39332432
            <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 部分少了一个括号

            头像
            G_Koala_C
              5.1k645133

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

              头像
              紫色的的云
                31
                新手上路，请多包涵

                <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);
    };
}
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题