Question

我通过ajax调用更新表，并希望在row.status == pending时显示spin.js微调器。基本上我有一个成功从

切换的行片段

 <div class="spinner">

到

 <div class="hide">

随着行计算的进行，（通过控制器内的ajax）。我对任何有效的机制感到满意！我挣扎的是，当价值

时

 <div class="spinner">

有一个微调器显示，否则隐藏它。

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>url</th>
                    <th>status</th>
                </tr>
            </thead>
            <tbody>                 
                <tr data-ng-repeat="row in result.results">
                    <td>{{row.link.url}}</td>
                    <td> <div loadingWidget class="{{(row.status == 'pending' ? 'spinner' : 'hide' ) }}"></div>{{row.status}}</td>
                </tr>                   
            </tbody>
        </table>

我的最新剧本 - 基本上我不知道自己在做什么，

app.directive('loadingWidget', function ($rootScope) {
    return {
        restrict: 'E',
        scope: {
            field: '=',
            attributes: '=',
            editMode: '='
        },

        link: function (scope, element, attrs) {
            scope.spinit = function() {
                $rootScope.$broadcast('spinit');
            }
        }
    };
});

$scope.$on('spinit', function(element){
    //react to event
    new Spinner().spin(element);
});

Answer 1

您应该使用ngHide指令。我很难确定你想要显示/隐藏条件的内容。规则是如果ng-hide的内容评估为true，则该元素将被设置为隐藏。

如果你绝对需要切换活动类，不只是隐藏元素，用户ng-class。这将根据范围内的变量设置类。

<table class="table table-hover">
    <thead>
        <tr>
            <th>url</th>
            <th>status</th>
        </tr>
    </thead>
    <tbody>                 
        <tr data-ng-repeat="row in result.results">
            <td>{{row.link.url}}</td>
            <td> 
              <div loadingWidget class="spinner" ng-hide="row.status"></div>
              {{row.status}}
            </td>
        </tr>                   
    </tbody>
</table>

此外，在根作用域上使用$ broadcast可能非常昂贵，而且几乎不需要。在你的情况下，我不明白为什么你不能直接调用Spinner（）。spin方法。

ngHide docs：https://docs.angularjs.org/api/ng/directive/ngHide

ngClass docs：https://docs.angularjs.org/api/ng/directive/ngClass

编辑：好的，所以我更彻底地完成了你的代码。你有几个问题。首先，你的指令是html中的kebab案例，javascript中的camelcase。这意味着您的指令应如下所示：<div loading-widget class="spinner" ng-hide="row.status">。此外，您在指令属性上限制了E.这意味着它只能用作元素，并且您将其用作属性。要解决此问题，请删除限制选项或将其更改为restrict: 'A'。你根本不需要你的loadingWidget指令上的范围，老实说，只要你包含Root Scope，你可能做错了。所有这些都会产生一个如下所示的指令：

app.directive('loadingWidget', function() {
    return {
        restrict: 'A',
        scope: {
            field: '=',
            attributes: '=',
            editMode: '='
        },
        link: function (scope, element, attrs) {
            console.log("elm: ", element[0]);
            new Spinner().spin(element[0]);
        }
    };
});

Plunkr Link

此外，Angular中已经存在Spin.js的包装器模块，所以如果你不介意更多的依赖关系是一个很好的选择（Link）。

就隐藏微调器的逻辑而言，我只是使用一个ngShow，其中包含该单元格中的任何值。当您更新值时，请将其设置为＆＃39;＆＃39;或错误或未定义。在页面加载或更改为我刚提到的值之一时，将隐藏微调器。一旦设置了值，它将不再是假的并且元素将显示。只要您从未期望在变量中存储false，这就可以正常工作。在Angular中，除非你真的需要，否则不要使用事件，只需操作范围变量并等待摘要周期。有一些简单的状态变量，然后是ngShow和ngHide的组合，可以简化视图中的简单状态更改。

熟悉编写好的Angular代码的核心价值在于，您基本上不会在范围或指令之外与您的应用程序进行交互。避免元素选择器，并避免事件，除非您确定需要它们。 Angular的大部分内容都是为了避免像JQuery这样的工具，因为它们会让你的代码难以阅读。

如何使用Angularjs在表行绑定后动态设置微调器

1 个答案: