DOM 当控制器变量的值改变时不被更新

Question

我有一个 AngularJS 应用依赖于本地存储中存储的数据。

在我的应用程序中，显示了一个电台列表，按最后一次点击的时间排序。当用户单击这些站点中的任何一个时，使用下面 $recentStations 服务中的 update 方法（成功）更新本地存储，并在屏幕上更新站点列表。

我的问题是，我在网站的 header 中显示了最新的电台，当用户点击一个电台时，它不会自动更新。

我该如何修改我的代码来解决这个问题？

服务

app.factory('$recentStations', ['$localStorage', function($localStorage){

    var recentStations = {
    
        local : $localStorage.$default({    
            recentStations: []
        }),
        
        get : function(){
            return this.local.recentStations;
        },
        
        getCurrent : function(){
            return this.local.recentStations[0];
        },
        
        update : function(elm){
            this.local.recentStations.unshift(elm);
        }
        
    };
        
    return recentStations;
    
}]);

控制器

app.controller('headerCtrl', ['$scope', '$recentStations', function($scope, $recentStations){

    $scope.currentStation = $recentStations.getCurrent();
    
}]);

HTML

<div id="header" data-ng-controller="headerCtrl">

    <div class="inner">
    
        <h1 data-ng-if="currentStation">
            <span class="orange">Tiger</span> | {{ currentStation.name }} ({{ (currentStation.code | uppercase) }})</span>
        </h1>
        
        <h1 data-ng-if="!currentStation"><span class="orange">Tiger</span> | Select a station</h1>
        
    </div>
    
</div>

Answer 1

构建控制器时，它会向当前站点请求服务并将其存储在范围变量中。但是当你更新服务中的当前站时，范围变量仍然引用初始当前站。不是新的。因此，您需要始终从服务中获取当前站点，而不是将其缓存在范围内：

而不是

$scope.currentStation = $recentStations.getCurrent();

使用

$scope.getCurrentStation = function() {
    return $recentStations.getCurrent();
}

并且在视图中，使用 getCurrentStation() 而不是 currentStation。这样，每次视图刷新时，它都会调用服务来获取最新的电台。

或者，当当前站被修改时，在 rootscope 上广播一个事件来提醒您的控制器它应该重新加载当前站。

请注意，您不应为自己的服务命名 $xxx。 $ 前缀准确地用作框架提供的服务的命名空间，以确保框架中任何新引入的服务都不会与您的服务冲突。

DOM 当控制器变量的值改变时不被更新

DOM not being updated when the value of a controller variable changes

angularjs

angularjs-service

angularjs-scope

服务

控制器

HTML