范围变量更改时如何获取动态视图以正确更新

安古纳

我正在开发Angular SPA,在一个视图上,有一个$scope变量确定该页面的大部分内容。如果用户单击菜单中的其他链接,则参数将通过url传递,并且scope变量将更新。但是,这样做时,视图不会更新。我通常在这里不问任何问题,但我尝试了一切似乎都没有的问题,并且无法弄清楚为什么视图未更新。代码如下所示:

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

$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后面的一个主题。

西里尔·塞巴斯蒂安
$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);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章