Question

有没有办法从控制器内的函数调用自定义指令函数。

var m=angular.module('myApp',[]).controller('test',function($scope){
//here i want to call input directive

});

m.directive('input', function() {});

Answer 1

对于调用指令函数，您需要使用事件调度：

var m=angular.module('myApp',[]).controller('test',function($rootScope){
  $rootScope.$emit('event-response', result);
  ...
});

m.directive('input', function($rootScope) {
  ...
  $rootScope.$on('event-response', function (args) {
    //function call...
  });
 .....
});

<强>更新

我们可以使用共享范围将指令添加到父控制器。它不太可能从父控制器范围继承，因为这种方式会产生非常强的耦合，并且您需要记住，当您重复使用此指令时，您从父级继承。

var m=angular.module('myApp',[]).controller('test',function($scope){
  $scope.myFunc() // available from `input` directive
  ...
});

m.directive('input', function() {
  return {
    scope: false, // scope is shared with parent controller
    controller: function($scope) {
      $scope.myFunc = function() {
        ...
      };
    }
  };
});

Answer 2

您可以将指令传递给控制器的对象，并在指令上指定该指令的功能。

我创建了plunker让你看到：http://plnkr.co/edit/JEb5dzefEgZM5N79kbT5?p=preview

HTML片段：

<body ng-controller="test">
   <input-test control="customControl"></input-test>
   <button ng-click="customControl.directiveFunction()">PRESS ME</button>
</body>

App.js

var m=angular.module('myApp',[]).controller('test',function($scope){
  $scope.customControl = {
  };
});

m.directive('inputTest', function($window) {
  return {
    restrict: 'E',
    template: '<div>TEST</div>',
    scope: {
      control: '='
    },
    link:function (scope, element, attrs) {
      //here is where we assign to our "control" (passed on directive's declaration) the directive function
      scope.control.directiveFunction = function() {
        $window.alert("CALLED"); 
      }
    }
  };
});

Answer 3

使用指令而不是服务是否有特定原因，因为服务在这里会派上用场。

使用服务很简单，只需看下面的例子，如果这对你有用。

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

app.service('testService', function(){
    this.testFunc = function () {
        return "Hello";
    };
});

app.controller('appController', function($scope, testService) {
    $scope.valueFromService = testService.testFunc();

});

要查看使用指令与工厂与服务之间的区别，请查看此链接：

Difference between service, directive and module

如何在angularjs中以编程方式调用自定义指令

3 个答案: