以角度将父指令变量传递给子指令答案

【问题标题】：communicating parent directive variable to child directive in angular以角度将父指令变量传递给子指令
【发布时间】：2015-06-10 22:21:17
【问题描述】：

我正在尝试基于嵌入到 div 中的元素构建一个简单的显示/隐藏指令。我有一个父母和一个孩子的指令。单击父指令时，子指令应切换显示/隐藏它的 div。切换函数位于父控制器中，并在真假之间切换变量，以便子指令可以显示/隐藏。

问题：父指令中的切换功能正常工作，但是子指令不知道切换变量在单击父指令时发生变化。我通过使用 require 将 ctrl 传递给子指令中的链接函数。这样我就可以访问父控制器对象以进行显示和隐藏。切换变量对孩子可见，但不反映页面初始加载后的任何更改。单击时，不会显示或隐藏任何内容。

代码：

angular.module('demo', [])

.directive('demoParent', function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        template: '<div ng-click="toggleTarget()" ng-transclude></div>',
        controller: function($scope) {
            $scope.toggleTarget = function() {
                this.openTarget = !this.openTarget;
            };
            this.openTarget = false;
        }
    };
})

.directive('demoChild', function() {
    return {
        require: '^demoParent',
        restrict: 'E',
        transclude: true,
        link: function(scope, elem, attrs, ctrl) {
            scope.ctrl = ctrl;
        },
        template: '<div ng-show="ctrl.openTarget" ng-transclude></div>',
    };
});

孩子是否需要在父 ctrl 中添加观察者，或者这是从父母传递给孩子的孤立变量的情况？

【问题讨论】：

demoChild 需要 demoChild 控制器。如果您需要从demoChild 访问demoParent 的范围，则需要使用require: '^demoParent' 代替。
能否也显示您的 HTML？
刚刚将其更改为 demoParent，这是我的一个错字。关于父控制器的要求，我没有收到任何错误。似乎孩子只是不知道父控制器有任何变化

标签： javascript html angularjs angularjs-directive

【解决方案1】：

我已经为您的工作场景创建了一个Fiddle，您也遇到了this 功能的问题，除了您所说的^demoChild 是一个错字。一旦进入你的函数，this 指向的是作用域，而不是你所期望的控制器，所以这部分应该修改：

controller: function($scope) {
    this.openTarget = false;
    var _ctrl = this;
    $scope.toggleTarget = function() {
        _ctrl.openTarget = !_ctrl.openTarget;              
    };              
}

【讨论】：

这对我有用。如何将其分配给另一个 var 来解决问题？间接与直接使用它并将其传递给孩子。
@user3613538 var _ctrl = this; 需要此行来保持对控制器的引用，然后您可以在函数中使用它。否则，this 指向 $scope 本身，因为 this 的值会有所不同 - 取决于您调用函数的方式。

【解决方案2】：

试试这个：变我=这个； $scope.toggleTarget = function() { 我.openTarget = !me.openTarget; };

【讨论】：