如何在作用域变量更改时使动态视图正确更新

Question

如何在作用域变量更改时使动态视图正确更新

3

我正在开发一个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 的地方，但在屏幕上加载的数据中未体现出更改。

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

- Anguna

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ciril sebastian · Accepted Answer

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