Question

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

JS控制器：

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仅显示逗号

Answer 1

进行异步调用的服务（例如LocDat）在返回时不会自动触发摘要事件。如果您正在编写服务，则应调用$ scope。$ apply（）链接到promise的末尾。或者，您可以在apply中包含对$ scope变量的任何更改，这样您就可以获得所需的更新。

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

Answer 2

在angularjs数据绑定中，如果数据类型是列表或对象，它将在视图中通过引用值传递。

当你喜欢$scope.l = selectedItem时，引用会被更改，但被监视的引用是前一个引用。因此，通过对象的属性绑定总是更好，而不是对象本身。喜欢：
<div id="title" class="center">{{obj.l.attributes.City}}, {{obj.l.attributes.State}}</div>

并在控制器中更新：
$scope.obj.l = selectedItem;

Answer 3

问题是当我加载新页面时范围发生了变化。我现在通过onsenui的pushpage函数的参数传递数据，并将它们分配给单独控制器中的范围变量。

Angular $范围未在HTML中显示正确的数据

3 个答案: