范围值未显示在视图中

scope values are not getting display in the view

本文关键字：视图 显示 范围      更新时间：2023-09-26

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

来宾控制器.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";
        });
 }

}

简介.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,
 }

请帮助我如何解决此问题。 谢谢

为了在视图中显示$scope.profileBizObj.html。可以使用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/

window.location = "profile.html"

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

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

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

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

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

配置文件测试.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>

来宾控制器.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;
        });
    }
  }
相关文章：