Question

我想从指令调用控制器中的函数。

我的指示

.directive('multEcs', ['$http', function($http){
    return{
        restrict: 'A',
        replace:false,
        link: function(scope, elem, attr){
            scope.addToArray();
        }
    }
}]);

控制器中的方法

$scope.addToArray = function(){
    console.log('method called');
}

Answer 1

尝试传入要调用指令的函数。

 .directive('multEcs', ['$http', function($http){
     return{
         restrict: 'A',
         replace:false,
         scope : {
             myFunctionToCall : '='
         },
         link: function(scope, elem, attr){
             scope.myFunctionToCall();
         }
     }
 }]);

Answer 2

第一种方法是控制器和指令之间的单向绑定：

<强> JS：

angular.module('App',[])
.directive('multEcs', [function(){
    return{
        restrict: 'A',
        replace: false,
        scope: {
            addToArray: '&'                            
        },
        link: function($scope, elem, attr){
            $scope.addToArray();
        }
    }
}])
.controller('HomeCtrl', ['$scope', function($scope){
    $scope.addToArray = function(){
        console.log('method called');
    }
}])

<强> HTML：

<div ng-app="App">
    <div ng-controller="HomeCtrl">
        <div mult-ecs add-to-array="addToArray()">multEcs</div>
    </div>
</div>

第二种方法是使用个人控制器在diretive中创建隔离范围。建议指令之间的通信：

JS：

angular.module('App',[])
.directive('multEcs', [function(){
    return {
        restrict: 'A',
        replace: false,
        controller: 'HomeCtrl',
        scope: {},
        link: function($scope, element, attrs, ctrl){
            ctrl.addToArray();
        }
    }
}])
.controller('HomeCtrl', ['$scope', function($scope){
    this.addToArray = function(){
        console.log('method called');
    };
}]);

HTML：

<div ng-app="App">
    <div>
         <div mult-ecs>multEcs</div>
    </div>
</div>

从指令到控制器的调用方法

2 个答案: