javascript - 如何在范围变量更改时使动态 View 正确更新

Question

我正在开发一个 Angular SPA，在一个 View 中，有一个 $scope 变量决定了该页面的大部分内容。如果用户单击菜单中的不同链接，参数将通过 url 传递，范围变量也会更新。但是，这样做时， View 不会更新。我通常不会在这里提问，但我已经尝试了所有的方法，但无法弄清楚为什么 View 没有被更新。代码如下所示:

html

<div ng-init="loadTopicView()">
    <h1 ng-bind="selectedTopic.title"></h1>
    <p ng-bind="selectedTopic.body"></p>
</div>

js

$scope.loadTopicView = function() {
    var selectedTopic  = urlParams.index;
    $scope.selectedTopic = $scope.topics[selectedTopic];
}

最初，我认为是因为它被调用的方式 $scope.selectedTopic 没有得到正确的值，就像 url 还没有值一样。 $scope.topics 是一个对象数组，用户点击的任何链接都会通过 url 传递索引，然后将正确的对象分配给 $scope.selectedTopic .

在尝试了很多事情之后，我什至尝试一遍又一遍地运行它，看看使用 window.setInterval 是否会有所不同，但它并没有改变这样一个事实，即由于某种原因，html 是'更新。

我以前见过这样的问题，有 bool 值和 ng-show，但我想不通。任何帮助将不胜感激。

根据要求提供更多信息:

这是侧边导航的 html，用于选择页面上显示的内容

<ul class="sidebar-nav">
    <li ng-repeat="topic in topics">
        <a href="" ng-click="loadPage('/topics', topic.id)" ng-bind="topic.title"></a>
    </li>
</ul>

这是 $scope.loadPage 的 javascript

$scope.loadPage = function(path, passedParams) {
    // at this point, `path` is going to the /topics view, and the `passedParams` has the id for the topic to load, lets say it is the integer: 5.

    if(path === $location.path() && path == '/topics') { // If you're switching topics but staying on the topic page
        if (!passedParams) {
            $state.reload(); // Meaning just refresh the page, no topic was selected.
        } else {
            $location.path(path).search({params: passedParams}); 
            $rootScope.$emit("CallingTopicUpdate", {});
        }
    } else { // This works fine in loading the correct topic, it is only when you are already on the topic page (so the above if), that it won't load the scope changes.
        if (passedParams) {
            $location.path(path).search({params: passedParams});
        } else {
            $location.path(path);
        }
    }
};

哦，这与 $scope.loadTopicView

在同一个 Controller 中

$rootScope.$on("CallingTopicUpdate", function(){
    $scope.loadTopicView();
});

使用 $emit 和 $on 这样当在主题页面上选择不同的主题时，它将再次运行此函数。但这就是它更新 $scope.selectedTopic 的地方，但更改并未在屏幕上加载的数据中体现出来。

结果，你可以看到params(一个代表主题的整数)，url的变化，但是根据主题动态绑定(bind)数据的page view不会切换到你选择的item，直到你选择另一个话题。本质上，如果你一直选择主题，url 是正确的， View 是 url 后面的一个主题。

Answer 1

$scope.loadTopicView = function(param) {
          var selectedTopic  = param ? param : 1;
          $scope.selectedTopic = $scope.topics.filter(function(value){return value.id==selectedTopic; });
};
$scope.loadPage = function(path, passedParams) {
              // at this point, `path` is going to the /topics view, and the `passedParams` has the id for the topic to load, lets say it is the integer: 5.
              if(path === $location.path() && path == '/topics') { // If you're switching topics but staying on the topic page
                  if (!passedParams) {
                      $state.reload(); // Meaning just refresh the page, no topic was selected.
                  } else {
                      $location.path(path).search({params: passedParams}); 
                      $rootScope.$emit("CallingTopicUpdate", passedParams);
                  }
              } else { // This works fine in loading the correct topic, it is only when you are already on the topic page (so the above if), that it won't load the scope changes.
                  if (passedParams) {
                      $location.path(path).search({params: passedParams});
                  } else {
                      $location.path(path);
                  }
              }
};
$rootScope.$on("CallingTopicUpdate", function(event, param){
            $scope.loadTopicView(param);
});