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

Question

HTML :

<div id="idOfDiv" ng-show="ngShowName">
    Hello
</div>

我想从我的指令中调用在我的控制器中声明的函数。我怎样才能做到这一点？我在调用该函数时没有收到错误消息，但什么也没有出现。

这是我的指令和控制器：

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

d3DemoApp.controller('mainController', function AppCtrl ($scope,$http, dataService,userService,meanService,multipartForm) {
    $scope.testFunc = function(){
        $scope.ngShowName = true;
    }
});

d3DemoApp.directive('directiveName', [function($scope) {

        return {
            restrict: 'EA',
            transclude: true,
            scope: {
                testFunc : '&'
            },

            link: function(scope) {

                    node.on("click", click);
                    function click(d) {
                        scope.$apply(function () {
                            scope.testFunc();
                        });
            }
        };
    }]);

Answer 1

在您的 link 函数中，您使用的 node 不存在。相反，您必须使用 element 这是 link.

的第二个参数

link: function(scope, element) {

  element.on("click", click);

  function click(d) {
    scope.$apply(function() {
      scope.testFunc();
    });
  }

Answer 2

你真的不应该使用控制器和指令。 Angularjs 旨在用作更多基于组件（指令）的结构，并且控制器更以页面为中心。但是，如果您打算这样做，则有两种方法可以解决。

首先访问 $parent:

如果您的指令在控制器范围内，您可以使用 scope.$parent.mainController.testFunc();

访问它

第二种（首选方式）：

创建服务工厂并将您的函数存储在其中。

    d3DemoApp.factory('clickFactory', [..., function(...) {
        var service = {}

        service.testFunc = function(...) {
            //do something
        }

        return service;
    }]);

   d3DemoApp.directive('directiveName', ['clickFactory', function(clickFactory) {

        return {
            restrict: 'EA',
            transclude: true,

            link: function(scope, elem) {

                    elem.on("click", click);
                    function click(d) {
                        scope.$apply(function () {
                            clickFactory.testFunc();
                        });
            }
        };
    }]);

提示，任何时候您使用指令时都不需要将 $scope 添加到它的顶部。 scope 和 scope.$parent 是您真正需要的，您将始终拥有范围上下文。此外，如果您在指令中声明 scope :{}，则将作用域与作用域的其余部分隔离开来，这很好，但如果您刚刚开始，可能会使事情变得更加困难。

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

Call method in controller from directive

scope

angularjs

angularjs-directive

angularjs-scope

angular-directive