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

你不应该真正使用控制器和指令。 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 :{}，则将范围与范围的其余部分隔离开来，这很好，但如果刚刚开始可能会让事情变得更加困难。

Answer 2

在您使用node的链接功能中，该功能不存在。相反，您必须使用element这是第二个要链接的参数。

link: function(scope, element) {

  element.on("click", click);

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

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

2 个答案: