javascript - 当长轮询更改 watch 值时，Angular.js 更新 ngclass

Question

使用 angular.js

我长时间轮询服务器，并且希望每当 build_tag 值增加时，使用“updated”类更新 View 中的元素。

因此，当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 -->

环境 Controller :

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 类添加到 View 中的相应元素。

Answer 1

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

.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"