如何在范围变量更改时使动态视图正确更新

Question

我正在开发一个Angular SPA，在一个视图中有一个$scope变量，用于确定该页面的大部分内容。 如果用户单击菜单中的其他链接，则参数将通过URL传递，并且范围变量将更新。 但是，执行此操作时，视图不会更新。 我一般不会在这里提问，但我已经尝试过似乎所有的东西，并且无法弄清楚为什么视图没有被更新。 这是代码的样子：

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没有更新的事实。

我以前见过这样的问题，有布尔值和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在同一个控制器中

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

使用$emit和$on以便在主题页面上选择不同的主题时，它将再次运行此功能。 但这就是它，它更新了$scope.selectedTopic但是在屏幕上加载的数据中没有显示更改。

因此，您可以看到params（表示主题的整数），更改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);
});