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

我正在开发一个角度SPA，在一个视图中有一个

$scope

变量，它决定了该页面的大部分内容。如果用户单击菜单中的其他链接，参数将通过url传递，范围变量将得到更新。但是，执行此操作时，不会更新视图。我通常不会在这里问问题，但我已经尝试了似乎所有的方法，并且不明白为什么视图没有被更新。下面是代码的样子：

html

起初，我认为是因为它被称为

$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.loadTopicView

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

使用

$emit

和

$on

以便在主题页面上选择其他主题时，它将再次运行此功能。但在这里，它会更新

$scope.selectedTopic

，但更改不会显示在屏幕上加载的数据中。

---

因此，您可以在url中看到参数（表示主题的整数）的更改，但是根据主题动态绑定数据的页面视图在您选择其他主题之前不会切换到您选择的项目。本质上，如果您一直选择主题，则url是正确的，视图是url后面的一个主题。

非常感谢您的回答！我试图将其合并，以了解其工作原理，但我在理解它时遇到了一些困难。因此，我只包含了一个html页面，

topicView.html

…但是，其中的数据将动态更改，以获得大约100个不同的选项。根据所选的日期，页面应仅显示该日期。我真的不理解指令中的switch语句以及不同的URL可能是什么。@Anguna..可能是我误解了这个场景。在我的指令示例中，我使用ng include，指定要在div中呈现的html文件的路径。并根据切换条件动态加载html。您可以共享您的菜单链接html吗..您如何传递urlparams？好的，我只是为您的问题内容添加了一些内容。希望这是有意义的。我已经创造了plunkr。你能试试这个吗

$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);
});

$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);
        }
    }
};

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

$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);
});