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没有得到正确的值，就像网址没有值。 $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);
});

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

1 个答案: