将 parent 指令变量传递给 angular 中的 child 指令

Question

我正在尝试基于嵌入到 div 中的元素构建一个简单的 show/hide 指令。我有一个 parent 和一个 child 指令。单击 parent 指令时，child 指令应将 show/hide 切换为 div。切换函数位于 parent 控制器中并在 true 和 false 之间切换变量，以便 child 指令可以 show/hide.

问题：parent 指令中的切换功能正常工作，但是 child 指令在单击 parent 时不知道切换变量的变化。我使用 require 将 ctrl 传递给 child 指令中的 link 函数。这样我就可以访问 parent 控制器 objects 来显示和隐藏。 toggle 变量在 child 可见，但不反映页面初始加载后的任何更改。单击时，不显示或隐藏任何内容。

代码：

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>',
    };
});

child 是否需要向 parent ctrl 添加观察者，或者这是一旦从 parent 传递到 child 的孤立变量的情况？

Answer 1

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

Answer 2

我已经对您的工作场景进行了 Fiddle，您的 this 功能也有问题，除了您说的 ^demoChild 是错字。一旦进入您的函数，this 指向范围，而不是您预期的控制器，因此应修改此部分：

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

将 parent 指令变量传递给 angular 中的 child 指令

communicating parent directive variable to child directive in angular

html

javascript

angularjs

angularjs-directive