javascript - Angular $scope 没有在 HTML 中显示正确的数据

标签 javascript html angularjs

我有一个 cordova 应用程序,我想在其中显示位置的详细信息。出于某种原因,当我尝试在 HTMl 中显示一个在 JS 中成功分配的变量时,什么也没有出现。

JS Controller :

app.controller('placeCtrl', function($scope, LocDat){
  LocDat.async().then(function(d){
    $scope.item= places.selectedItem;  
    $scope.locs = [];
    for(var i=0; i<d.length; i++){
      if(d[i].attributes.Joint.id === places.selectedItem.id){
        getDistance(d[i]);
        $scope.locs.push(d[i]);
      }
    }

    $scope.showSite = function(){
    //var ref = navigator.app.loadUrl($scope.item.attributes.Website, '_blank');
    var ref = window.open($scope.item.attributes.Website,'_blank','location=yes');
  }

  $scope.showDetail = function(index){
    var selectedItem = d[index];
    d.selectedItem = selectedItem
    $scope.l = selectedItem;
    console.log($scope.l.attributes.City);
    $scope.ons.navigator.pushPage('location_detail.html', { title : d.selectedItem.attributes.Address });
  }
});

HTML:

<!DOCTYPE html>

<html>
    <body>
        <div ng-controller="placeCtrl">
            <ons-page class="center" ng-device-backbutton="myNavigator.popPage()">
                <ons-toolbar>
                  <div class="left"><ons-back-button ons-if-platform="ios">Back</ons-back-button></div>
                  <div id="title" class="center">{{l.attributes.City}}, {{l.attributes.State}}</div>
                  <!--<div class="left" onclick=".myNavigator.popPage()"><ons-back-button>Back</ons-back-button></div>-->
                  <!--<div class="center">Page 2</div>-->
                </ons-toolbar>
                <h2 align="center">Location Details Go Here</h2>
                <!--enter more content here-->
            </ons-page>
        </div>
    </body>
</html>

控制台输出图像:

显然我的声誉太低,无法发布图片...认真的吗?无论如何,它在控制台中成功显示城市名称,但 html 仅显示逗号

最佳答案

进行异步调用的服务(例如您的 LocDat)在返回时不会自动触发摘要事件。如果你正在编写一个服务,它应该调用链接到 promise 末尾的 $scope.$apply() 。或者,您可以将对 $scope 变量的任何更改包装在 apply 中,这应该可以让您到达所需的位置。

$scope.$apply( function() { $scope.l = selectedItem; } );

关于javascript - Angular $scope 没有在 HTML 中显示正确的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28179677/

相关文章:

javascript - 如何将表格单元格的值设置为空?

html - 将水平ul元素符号列表与自定义元素符号对齐

javascript - 输入时提交的表单需要至少一个输入类型 = "text"元素

javascript - Angular JS : Promise returns resource

c# - 用另一个 MVC 填充控件

javascript - 声明后向 JSX.Element 添加属性

javascript - 带有切换点击和超时的下拉颜色选择器

javascript - Arduino 上的响应式编程

JavaScript 试图改变图像

javascript - Angular : Is this the correct way to structure a $http POST request?