각도 $ 범위가 HTML에 올바른 데이터를 표시하지 않습니다.

위치의 세부 정보를 표시하려는 코드바 앱이 있습니다. 어떤 이유로 JS에 성공적으로 할당 된 HTMl에 변수를 표시하려고 시도하면 아무 것도 나타나지 않습니다.

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>

이미지 :

분명히 내 평판이 심각 하 게 ... 이미지를 게시 할 너무 낮습니다? 어쨌든 콘솔에 도시 이름이 성공적으로 표시되지만 쉼표 만 표시됩니다.

출처

2015-01-27 deavisdude

문제는 내가 새 페이지를로드 할 때 범위가 변경이었다. 이제 데이터를 onsenui의 푸시 페이지 함수의 매개 변수를 통해 전달하고 별도의 컨트롤러에서 범위 변수에 할당합니다.

출처

2015-02-22 19:56:38 deavisdude

LocDat와 같이 비동기 호출을하는 서비스는 자동으로 다이제스트 이벤트를 반환하지 않습니다. 서비스를 작성하는 경우 $ scope()를 호출해야합니다. $ apply()는 약속의 끝 부분에 연결됩니다. 또는 적용 범위 내에서 $ scope 변수에 대한 변경 사항을 래핑 할 수 있으므로 필요한 곳으로 가져갈 수 있습니다.

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

출처

2015-01-27 20:52:41

내가 제안한대로 포장했지만 지금은 내가 정의가 없다는 말을 듣고 있습니다 – deavisdude

jsfiddle에서 예제를 구할 수 있습니까? –

내가 이해할 수 없을 것 같습니다. jsfiddle에서 작동, cordova 애플 리케이션 에뮬레이터가 필요 플러스 그 내 파스 아이디를 포기해야합니다 – deavisdude

angularjs 데이터 바인딩에서 데이터 유형이 목록 또는 객체 인 경우보기에서 참조 값을 전달합니다.

$scope.l = selectedItem처럼하면 참조가 변경되지만 감시 참조는 이전 참조입니다. 따라서 객체의 속성으로 바인딩하는 것이 항상 좋지만 객체 자체는 바인딩하지 않는 것이 좋습니다. 같은 :와 컨트롤러의
<div id="title" class="center">{{obj.l.attributes.City}}, {{obj.l.attributes.State}}</div>

및 업데이트 :
$scope.obj.l = selectedItem;

출처

2015-02-09 02:43:44 Mavlarn

각도 $ 범위가 HTML에 올바른 데이터를 표시하지 않습니다.

답변

관련 문제