Question

我无法让ng-show在我的指令模板中工作。我正在使用AngularJS 1.6.4。 Chrome调试器显示了最终DOM中从ng-show="true"到ng-show="false"的成功更改。但是当设置为true时，元素保持隐藏状态。看来这是因为AngularJS在元素的列表中添加了ng-hide类，但在ng-show更改为true时不会删除它。也许AngularJS在这个阶段没有评估？如何正确显示/隐藏？

我已经玩了一段时间并尝试了不同的方法，包括直接使用loading参数而不是使用范围showspinner。我也尝试在指令模板中省略了胡须（AngularJS表达式），如下所示：ng-show="showspinner"但这会因为只渲染到ng-show="showspinner"而不是ng-show="false"而变得更糟。

以下是我的代码。

在$ctrl.result设置为$ctrl.resultsLoading时异步加载true，结果完成后将其设置为false：

<report-tile
     title="My Report Item"
     value="{{$ctrl.result.count|number:0}}"
     loading="{{$ctrl.resultsLoading}}">
</report-tile>

这是我的ReportTileDirective.js

(function(angular) {
"use strict";

angular
    .module("app")
    .directive(
        "reportTile", 
        ["$templateCache", "$compile" ,function($templateCache, $compile) {
            return {
                restrict: "EA",
                scope: {
                    title: "@",
                    value: "@",
                    loading: "@"
                },
                link: function (scope, element, attribues) {
                    scope.showspinner = false;
                    scope.$watch("loading",
                        function () {
                            scope.showspinner = attribues.loading;
                            console.log("watching::loading::" + attribues.loading);

                        });
                },
                templateUrl: "app/directives/ReportTileDirective.html"
            };
        }]);
}(window.angular));

这是我的ReportTileDirective.html

<div class="col-sm-4 col-md-3 col-lg-2 col-padding">
<div class="panel panel-default">
    <div class="panel-heading tile-title">
        <strong>{{title === '' ? 'Loading' : title}}</strong>
    </div>
    <div class="panel-body" style="text-align: right">
        <strong>
            <i ng-show="{{showspinner}}" class="fa fa-refresh fa-spin"></i>
            {{value === '' ? 0 : value}}
        </strong>
    </div>
</div>

最后这是渲染的DOM（如Chrome调试器元素选项卡中所示），加载完成后切换到true，ng-hide未删除：

<i ng-show="true" class="fa fa-refresh fa-spin ng-hide"></i>

请帮忙！谢谢！

Answer 1

我发现我的问题与此one重复，感谢@ CodeWarrior的回答，我能解决这个问题。我可以删除整个link:部分，并在以下情况下直接使用loading参数：我将其与=而不是@绑定，然后删除表达式语法，以便这是在指令中而不是事先评估的。

所以我的指令用法改为：

<report-tile
    title="My Report Item"
    value="{{$ctrl.result.count|number:0}}"
    loading="$ctrl.resultsLoading"> <!-- notice no mustaches here -->
</report-tile>

我的指令JavaScript文件更改为：

(function(angular) {
"use strict";

angular
    .module("app")
    .directive(
        "reportTile", 
        ["$templateCache", "$compile" ,function($templateCache, $compile) {
            return {
                restrict: "EA",
                scope: {
                    title: "@",
                    value: "@",
                    loading: "=" /* notice the = binding */
                },
                templateUrl: "app/directives/ReportTileDirective.html"
            };
        }]);
}(window.angular));

然后我的指令模板最终变为：

<div class="col-sm-4 col-md-3 col-lg-2 col-padding">
<div class="panel panel-default">
    <div class="panel-heading tile-title">
        <strong>{{title === '' ? 'Loading' : title}}</strong>
    </div>
    <div class="panel-body" style="text-align: right">
        <strong>
            <i ng-show="loading" class="fa fa-refresh fa-spin"></i> <!-- notice to mustaches here -->
            {{value === '' ? 0 : value}}
        </strong>
    </div>
</div>

如何让ng-show在AngularJS指令中工作？

1 个答案: