Question

我是AngularJS的新手。我将响应数据存储在控制器的范围内。但是存储在范围中的值不会显示在html页面中。

宾 - controller.js

   var guestProfileApp = angular.module('guestProfileApp', ['guestProfileServices' ]);
   guestProfileApp.controller( 'guestProfileController', [ '$scope', 'guestProfileService', GuestProfileController ]);

  function GuestProfileController( $scope, guestProfileService)
  {
    $scope.getProfile = getProfile;
    $scope.saveProfile = saveProfile;
    console.log('guest profile controller called');

    function getProfile( profileID ){
        return guestProfileService.getProfile( profileID ).then( function( response ){
            $scope.profileBizObj = response.data;
            console.log($scope.profileBizObj);
            window.location = "profile.html";
        });
 }

}

profile.html

<html lang="en" ng-app="guestProfileApp">
   <body ng-controller="guestProfileController">
     <div class="form-group">
       <div class="input-group">
       <input type="text" class="form-control" placeholder="First Name" id="f_firstName" ng-model="profileBizObj.profileData.nameInfo.firstName">
       <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
       </div>
    </div>
    <div class="form-group">
       <div class="input-group">
    <input type="text" class="form-control" placeholder="Last Name" id="f_lastName" ng-model="profileBizObj.profileData.nameInfo.lastName">
       <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
        </div>
    </div>
     <div class="form-group">
      <div class="input-group">
       <input type="date" class="form-control" placeholder="Date of Birth" id="f_dob" ng-model="profileBizObj.profileData.nameInfo.birthDate">
       <div class="input-group-addon"><span class="glyphicon glyphicon-gift"></span></div>
        </div>
      </div>
 </body>
</html>

当我使用

显示响应数据时

  console.log($scope.profileBizObj);

数据正确显示。但是，当我转向“profile.html”并尝试使用ng-model显示profileBizObj数据时，不会显示值。

这是console.log（$ scope.profileBizObj）;

的输出

 {"addressList":[],
  "customerID":"MYCUST",
  "emailList":[],
  "formattedName":"JOHN PAWLIW, #388569330",
  "phoneList":[],
  "profileData":{"createdOn":"2015-11-24T14:05:58",
            "customerID":"MYCUST",
            "nameInfo":{"createdOn":"2015-11-24T14:05:58",
                        "firstName":"JOHN",
                        "lastName":"JOHN PAWLIW",
                        "mergedObjectState":2,
                        "middleName":"",
                        "nameInfoID":12642,
                        "nameTitle":"MR",
                        "profileID":7183,
                        "selectedLocale":"en_US",
                        "updatedOn":"2015-11-24T14:05:58"},
            "profileID":7183,
            "selectedLocale":"en_US",
            "status":"ACTIVE",
            "updatedOn":"2015-11-24T14:05:58"},
  "profileID":7183,
 }

请帮我解决此问题。谢谢

Answer 1

要在view.html中显示$scope.profileBizObj。您可以使用ng-repeat迭代对象属性。

 <div ng-repeat="item in profileBizObj">
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="First Name" id="f_firstName" ng-model="item.profileData.nameInfo.firstName">
      <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Last Name" id="f_lastName" ng-model="item.profileData.nameInfo.lastName">
        <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
      </div>
    </div>
  </div>

这是小提琴链接：https://jsfiddle.net/rrwfu834/2/

Answer 2

window.location = "profile.html"

加载新页面。新页面与上一页不共享任何信息。这就像点击重新加载或在浏览器窗口中输入新网址一样。

查看您的代码，只需尝试删除该行，看看是否可以解决您的问题。

有几种方法可以在当前页面中加载模板 - 最简单的方法可能是ng-include。

您也可以使用路线或ui.router。

Answer 3

通过进行以下更改来解决问题

<强> profiletest.html

   <body>
     <div ng-app="guestProfileApp">
        <div ng-controller="guestProfileController">
            <button ng-click="getProfile(1546)">Show Profile</button>  
            <ng-include ng-if="showProfile" src="'profile1.html'"></ng-include> 
        </div>
     </div>
   </body>

<强>宾 - controller.js

function GuestProfileController( $scope, guestProfileService)  
 {
    $scope.getProfile = getProfile;
    $scope.saveProfile = saveProfile;
    console.log('guest profile controller called');

    function getProfile( profileID ){
        return guestProfileService.getProfile( profileID ).then( function( response ){
            $scope.showProfile = true; 
            $scope.profileBizObj = response.data;
        });
    }

  }

范围值未在视图中显示

3 个答案: