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

Question

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

我已经研究了一段时间并尝试了多种不同的方法，包括直接使用 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

我发现我的问题与此重复，感谢@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 指令中工作？

How do I get the ng-show to work inside an AngularJS directive?

angularjs-directive

angularjs-ng-show