Question

我是一名新手，我很乐意在这里提供一些帮助。我很难找到为什么我不能设置一个设置属性hide =“true”或“false”的指令，该指令将在指令（Rank）中用作更改内部指令（label）的参数 - 隐藏标签。我尝试了一切

外部指令（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>

内部指令（Label）指令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是：显示标签的一个示例：

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

显示标签的另一个例子：

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

隐藏的例子是：

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

感谢您的努力。

祝你好运，陈

Answer 1

您将范围属性名称设置为“hideLabel”：

scope.hidelabel = attrs.hide;

因此，您需要使用“hideLabel”作为ng-hide属性：

<label-info ng-hide="hideLabel" header="{{header}}"></label-info>

您需要在“labelInfo”指令模板中声明ng-hide：

<div ng-hide="hideLabel">

（此“div”是<div class="fs-labelInfo-text">上/Components/Directives/LabelInfo.html以上的那个。）

ng-hide在层次结构指令中不起作用

1 个答案: