AngularJS访问子指令中的隔离范围

Question

这是我的HTML部分：

<div data-my-question="" data-question="Question text?">
    <div data-yes="">
        YES!
    </div>
    <div data-no="">
        NO!
    </div>
</div>

这是我的角度指令：

angular.module('myModule').directive('myQuestion', [
    function () {
        return {
            restrict: 'A',
            replace: true,
            scope: {
                question: '@'
            },
            transclude: true,
            controller: function($scope){
                $scope.answered = false;
                $scope.yesActive = false;

                $scope.activateYes = function (yesActive) {
                    $scope.answered = true;
                    $scope.yesActive = yesActive;
                };
            },
            template:  '<div>' +
                '<div class="question-box" ng-class="{answered: answered}">' +
                '<div class="question">' +
                '{{question}}' +
                '</div>' +
                '<div class="buttons">' +
                '<a href="" class="btn btn-small" ng-click="activateYes(true)">Yes</a>' +
                '<a href="" class="btn btn-small" ng-click="activateYes(false)">No</a>' +
                '</div>' +
                '</div>' +
                '<div ng-transclude></div>' +
                '</div>'
            };
    }
])
.directive('yes', [
    function () {
        return {
            restrict: 'A',
            replace: true,
            transclude: true,
            template:   '<p ng-show="answered && yesActive" ng-transclude></p>'
        };
    }
])
.directive('no', [
    function () {
        return {
            restrict: 'A',
            replace: true,
            transclude: true,
            template:   '<p ng-show="answered && !yesActive" ng-transclude></p>'
        };
    }
]);

问题是，儿童指令（＆＃39;是＆＃39;，＆＃39; no＆＃39;）无法访问“已解答”的指令。并且“是”活动＆＃39;来自父指令的变量，它具有隔离的范围。

如何实现子指令对父指令的值更改做出反应？

Answer 1

被转换的元素无法访问指令的隔离范围。

这是Angular的工作原理，一个孤立的范围（myQuestion）不会从任何父级继承，并且被转换的元素（是/否）将成为myQuestion范围的兄弟。

Transcluded元素将是定义它们的原始范围的子元素，这样它们仍然能够绑定而不是被隔离。

如果你检查这个JSBIN，你会在控制台中看到是/否范围可以访问$ rootScope（定义披萨的位置），而myQuestion的隔离范围则不会。

您可以获得有关此here的更多信息。

解决方案：

我喜欢简单的代码，所以如果可能的话，我会在问题模板中移动Yes / No元素，但你也可以communicate between directives。