Angular.js 在长轮询更改监视值时更新 ng-class

Question

使用angular.js

我正在长时间轮询服务器，并希望在 class 为 'updated' 时更新视图中的元素，每当 build_tag 值递增时。

所以我正在努力寻找一种优雅的方法来添加更新的 class，当 catalog.products[??].build_tag 已更改时。

<div ng-controller="MyAwesomeController as env">
    <div class="product-wrapper" ng-class="{'error': product.error, 'updated': HELP!! }" ng-repeat="product in env.catalog">

    <!-- show stuff in cool and interesting ways -->

环境控制器：

app.controller('EnvironmentController', ['$http', '$interval', function($http, $interval) {

    var vm = this;
    var pollingInterval = 5000;
    vm.catalog = {

        // only showing 2 products for the
        // sake of brevity. I normally have dozens
        // of products
        products: [{
            name: 'widget1',
            error: false,
            build_tag: 7
        }, {
            name: 'widget2',
            error: false,
            build_tag: 5
        }]
    };

    function fetchData() {
        $http.get('/builds.json').then(function (resolved) {
            if (resolved.status === 200) {
                vm.catalog = angular.merge(vm.catalog, resolved.data);
            }
        }, function (rejected) {
            ... do error stuff
        });
    }

    $interval(fetchData, pollingInterval);
... more controller stuff

这有意义吗？当我轮询服务器时，我更新 vm.config。我希望每个产品包装器都能看到它的 build_tag。如果 build_tag 已更改，我想向视图中的相应元素添加 updated class。

Answer 1

您始终可以编写指令来添加 class。

.directive('buildTagUpdated', [function() {
    return {
        link: function buildTagUpdatedLink(scope, element, attributes) {
            scope.$watch('buildTag', function(newValue, oldValue) {
                if (newValue !== oldValue) {
                    /**
                     * you can use element methods here 
                     * see https://docs.angularjs.org/api/ng/function/angular.element
                     */
                }
            });
        },
        restrict: 'A',
        scope: {
            buildTag: '='
        }
    };
}]);

然后在要更新的元素上，只需添加 build-tag-updated="product.build_tag"

Angular.js 在长轮询更改监视值时更新 ng-class

Angular.js updating ng-class when long polling changes a watched value

javascript

angularjs

ng-class