当前位置: 首页 > 面试题库 >

AngularJS:将所需的指令控制器注入控制器,而不是链接函数

燕成双
2023-03-14
问题内容

正常使用案例

如果您有父指令和子指令,则可以在父指令的控制器中创建方法,并在子指令中需要父控制器。Angular会将父控制器传递到您的子指令链接函数中。

我的用例

我有一个用例,其中子指令是另一个指令的父指令。我在中间的指令要求的顶部有on指令。中间的指令是底部的最后一个指令所必需的。

在一个简单的世界中,我可以为中间指令创建一个链接方法和一个控制器。link方法使用顶部控制器处理所有内容,并且将中间控制器传递给bottom指令。

在我的情况下,中间指令的控制器中的方法必须调用父代中的方法,因此我需要中间控制器中的顶级控制器,而不是中间指令的link函数中的!

问题

如何将所需的控制器而不是链接功能注入到控制器中

angular.module('app').directive('top', function () {
    return {
        $scope: true,
        templateUrl: "top.html",
        controller: function() {
            this.topMethod = function() {
                // do something on top
            }
        }
    }
});

angular.module('app').directive('middle', function () {
    return {
        $scope: true,
        templateUrl: "middle.html",
        require: "^top",
        controller: function($scope, $attrs, topController) {
            this.middleMethod = function() {
                // do something in the middle

                // call something in top controller, this is the part that makes everything so complicated
                topController.topMethod();
            }
        }
    }
});

angular.module('app').directive('bottom', function () {
    return {
        $scope: true,
        templateUrl: "bottom.html",
        require: "^middle",
        link: function(scope, element, attrs, middleController) {
            $scope.bottomMethod = function() {
                // do something at the bottom

                // call something in the parent controller
                middleController.middleMethod();
            }
        }
    }
});

问题答案:

实际上,还有另一种方式不太冗长,并且由角度ngModel本身使用:

var parentForm = $element.inheritedData('$formController') || ....

基本上,它们使用以下事实:将控制器存储在指令dom元素的data属性中。

仍然有点有线,但是比较冗长,更易于理解。

我看不到为什么不能将所需的控制器传递到指令控制器的注入本地的原因。



 类似资料:
  • 问题内容: 我可能会考虑将其完全倒退,但是我正在尝试制作三个嵌套指令,让它们称为:屏幕,组件和小部件。我希望窗口小部件能够触发组件中的某些行为,从而触发屏幕中的某些行为。所以: 我可以使用来在小部件的链接fn中要求父组件,但是如何进一步使组件控制器访问其包含的屏幕呢? 我需要的是WHAT in组件,因此,当您单击小部件的按钮时,它会发出“ screeny!”警报。 谢谢。 问题答案: 您可以通过以

  • 问题内容: 我正在尝试使用AngularJS创建我的第一个应用程序。但是,如果我需要针对特定​​情况使用指令,我会感到困惑。 我有一个简单的“地图”页面,需要在其中显示所选区域的纬度/经度值。目前,我根本没有使用指令。我在控制器中执行所有操作,并使用局部显示结果。我不打算在其他任何地方重用我的地图视图。这就是为什么我不觉得我需要指令。 另一方面,我读到某个地方,每次您尝试在控制器中操作DOM(我正

  • 问题内容: 这里发生了什么? 这是我的指令: 这是使用中的指令的示例: 这是实际的错误文本: 问题答案: 如此处所述:Angular NgModelController ,您应提供所需的控制器

  • 问题内容: 我是Angular的新手,正在尝试弄清楚该怎么做… 使用AngularJS,如何注入要在另一个控制器中使用的控制器? 我有以下片段: 执行此操作时,出现错误: 我是否应该尝试在另一个控制器内部使用一个控制器,还是应该将此服务用作服务? 问题答案: 如果您打算掌握已经实例化的另一个组件的控制器,并且如果您遵循的是基于组件/指令的方法,则始终可以遵循某个层次结构的另一个组件中的控制器(一个

  • 问题内容: 我已经用AngularJS编写了一个服务,但是我无法使其与角度种子处理方式一起使用。 控制器代码如下: 请注意,注释掉的部分工作正常,但我想像(推荐的)第二种方式来处理它。 我得到的错误是照片是未定义的,所以我的猜测是我传递(注入)它的方法是错误的,但是我找不到正确的方法 问题答案: 您需要定义服务: 一些参考: http://docs.angularjs.org/api/angula