Question

我正在尝试根据转换为div的元素构建一个简单的show / hide指令。我有父母和子女指令。当单击父指令时，子指令应切换显示/隐藏它的div。 toggle函数位于父控制器中，并在true和false之间切换变量，以便子指令可以显示/隐藏。

问题：父指令中的toggle函数正常工作，但是当单击父级时，child指令不知道切换变量的变化。我通过使用require将ctrl传递给子指令中的link函数。这样我就可以访问父控制器对象来显示和隐藏。切换变量由子项可见，但在初始加载页面后不反映任何更改。点击后，没有任何显示或隐藏。

代码：

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中？或者这是一个孤立变量从父到子传递的情况？

Answer 1

我已经根据您的工作方案制作了Fiddle，您的this功能也存在问题，除了您所说的^demoChild错字。进入函数后，this指向范围，而不是指向控制器，因此应修改此部分：

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

Answer 2

试试这个： var me = this; $ scope.toggleTarget = function（）{ me.openTarget =！me.openTarget; };

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

2 个答案: