angularjs - ng-hide は階層ディレクティブ内では機能しません

Question

私はAngularの初心者であり、ここで助けていただければ幸いです。内部ディレクティブ (ラベル) ng を変更するパラメーターとしてディレクティブ (ランク) 内で使用される属性 hide="true" または "false" を設定している 1 つのディレクティブを設定できない理由を見つけるのに苦労しています。 -hide でラベルを非表示にします。私はすべてを試しました

外部ディレクティブ (Rank) html:

    <div>
    <img src="/Components/Directives/images/blue_{{RankValue}}.svg" tooltip="{{RankValue}}/4" />
    <label-info ng-hide="hide" header="{{header}}"></label-info>
</div>

外部ディレクティブ (Rank) ディレクティブ Java スクリプト:

    angular.module('reusableDirectives')
    .directive('Rank', function () {
        return {
            restrict: 'E',
            scope: {
                hide: '='
            },
            link: function (scope, element, attrs) {
                scope.safeApply(scope.RankValue = scope.$eval(attrs.value));
                scope.safeApply(scope.hidelabel = "true");
                if (attrs.hidelabel == "false")
                    scope.safeApply(scope.hidelabel = "false");
                scope.hidelabel = attrs.hide;
            },
            templateUrl: '/Components/Directives/Rank.html'
        };
    })
    .controller('rankCtrl', ['scope', function ($scope) {
}]);

内部ディレクティブ (ラベル) Html:

        <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>{{header}}</h3>
        </div>
        <div class="modal-body">
            <div ng-bind-html="items"></div>
        </div>
    </div>
        <div class="modal-footer">
            <div style="float:left;">
                <button class="btn btn-primary" ng-click="ok()">Close</button>
            </div>
        </div>
</script>

<div>
    <div class="fs-labelInfo-text">
        {{header}}
    </div>
    <img class="fs-labelInfo-img"
        ng-click="update(header)"
        src="Components/Directives/images/questionMark.png" />
</div>

内部ディレクティブ (ラベル) ディレクティブ Java スクリプト:

        angular.module('reusableDirectives')
    .directive('labelInfo', function () {
        return {
            restrict: 'E',
            scope: {
                isolatedLabelHide: '@hidelabel'
            },
            controller: function ($scope, $element, $modal, $log, $http, $rootScope, myService) {
                $scope.header = "header attribute";
                $scope.caption = "label caption";

                $scope.ok = function (header) {
                    myService.getLabelInfo(header).then(function (data) {
                        //this will execute when the AJAX call completes.
                        $scope.items = data;
                        console.log(data);
                        $scope.open();
                    });
                };
                $scope.open = function () {
                    $log.info('open');
                    var modalInstance = $modal.open({
                        templateUrl: 'myModalContent.html',
                        controller: ModalInstanceCtrl,
                        resolve: {
                            header: function () {
                                return $scope.header;
                            },
                            items: function () {
                                return $scope.items;
                            }
                        }
                    });

                    modalInstance.result.then(function () {
                    }, function () {
                        $log.info('Modal dismissed at: ' + new Date());
                    });
                };
            },
            link: function (scope, element, attrs) {
                scope.header = attrs.header;
            },
            templateUrl: '/Components/Directives/LabelInfo.html'
        };
    });

angular.module('reusableDirectives')
    .controller('ModalInstanceCtrl', function ($scope, $modalInstance, header, items) {
        $scope.items = items;
        $scope.header = header;

        $scope.ok = function () {
            $modalInstance.close();
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    });

テストに使用している html は次のとおりです。ラベルを表示する 1 つの例:

<rank hide="false" value="3.5"></rank>

ラベルを表示する別の例:

<rank value="3.5"></rank>

非表示にする例は次のとおりです。

<rank hide="true" value="3.5"></rank>

あなたの努力に感謝。

よろしく、チェン