angularjs如何在directive里调用controller的function?

请问如何在directive里面调用controller的function?代码如下:

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

    app.controller('myCtrl',function($scope){
       $scope.test= function(){
        ...
        }
    }
    app.directive('myDir',    function(){        return {
            restrict:'EA',
            replace: true,
            template: '<input ng-click="test()"></input>',
            scope:{
                test: '&'
            },
            controller: [                '$scope', function ($scope) {
                    $scope.accept = function () {
                  
                       $scope.test();                       

                    };
                }
                ],
        }
    }
);

html是这样的:<button type="button" ng-click="accept()">test</button>

要怎样才能实现点击test button的时候在调用了directive里的accept function之后同时调用controller里面的test function呢?


守着星空守着你
浏览 1039回答 3
3回答

月关宝盒

&nbsp; &nbsp; var app = angular.module('myApp',[]);&nbsp; &nbsp; app.controller('myCtrl',function($scope){&nbsp; &nbsp; &nbsp; &nbsp;$scope.accept= function(){&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; app.directive('myDir',&nbsp; &nbsp; function(){&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; restrict:'EA',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; replace: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; template: '<input ng-click="test()"></input>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: '&'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; link: function(scope, element, attrs) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 元素.bind("click",function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope.accept();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });

蓝山帝景

可以把myCtrl里的test function&nbsp;存到service里,然后在directive里调用service里的test functionapp.controller('myCtrl',function($scope,methods){&nbsp; &nbsp;$scope.test= function(){&nbsp; &nbsp; ...&nbsp; &nbsp; }&nbsp; &nbsp;methods.test = $scope.test;}app.factory('methods',function(){&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: null&nbsp; &nbsp; &nbsp; &nbsp; };})app.directive('myDir',&nbsp; &nbsp; function(){&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; restrict:'EA',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; replace: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; template: '<input ng-click="accept()"></input>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; controller: function ($scope,methods) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $scope.accept = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log('accept fn');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;methods.test();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });或者:var app = angular.module('myApp',[]);app.controller('myCtrl',function($scope){&nbsp; &nbsp;$scope.test= function(){&nbsp; &nbsp; ...&nbsp; &nbsp; }}app.directive('myDir',function(){&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; restrict:'EA',&nbsp; &nbsp; &nbsp; &nbsp; replace: true,&nbsp; &nbsp; &nbsp; &nbsp; template: '<input ng-click="test()"></input>',&nbsp; &nbsp; &nbsp; &nbsp; scope:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; test: '&'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; controller: function(){}&nbsp; &nbsp; }});HTML:<my-dir test="test()"></my-dir>

白猪掌柜的

<button type="button" ng-click="accept()">test</button>&nbsp;这是&nbsp;html&nbsp;里的调用方式?然后这个是 directie 的 template:&nbsp;<input ng-click="test()"></input>?所以你的&nbsp;myDir&nbsp;这个 directive 到底是在哪儿调用的?另外,如果方便,请你大概描述一下你要实现什么功能。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

AngularJS