使用GET请求时,AngularJS的$scope变量不会显示在ionic视图中

AngularJS $scope variable will not display in ionic view using GET request

本文关键字:显示 ionic 视图 变量 scope 请求 GET AngularJS 使用      更新时间:2023-09-26

我有一个显示响应数据的问题,从我的工厂返回,在离子视图页面内。我相信这个问题与我处理承诺的方式有关,但我不能确定原因。因此,为了开始解决我的问题,下面是我的:

.factory('profileFactory', function ($http, $q) {
var config = {
    headers: {
        'MyKey': 'myvalue'
    }
};
this.getEmployee = function (userId) {
    return $http.get('http://someurlpathtogoto' + userId + 'etc', config).then(function (response) {
        console.log(response.data)
        return response.data;
    })
}
return this;
})

上面的代码返回我需要的控制器JSON对象,所以:

控制器

.controller('EmployeeCtrl', ['$scope', 'profileFactory', function ($scope, profileFactory) {
//Set back to false
$scope.profileLoaded = true;
$scope.serviceUnavailable = false;  
$scope.setId = function (userId) {
    profileFactory.getEmployee(userId).then(function(arrItems){
        $scope.employee = arrItems;
        $scope.firstName = $scope.employee.record[0].First_Name;
        $scope.lastName = $scope.employee.record[0].Last_Name;
    };
}])

现在当我的页面显示时,我希望它看起来像这样:

Ionic View (Profile)

<ion-view view-title="Profile" ng-controller="EmployeeCtrl" hide-nav-bar="true">
<ion-pane>
    <!-- TODO: BACK BUTTON, NO TITLE -->
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content>
        <div ng-show="serviceUnavailable">
            Directory service unavailable
        </div>
        <div ng-show="profileLoaded">
            <br />
            <center><img class="focus-img-circle" ng-src="default.png" /></center>
            <center><b>{{firstName}} {{lastName}}</b></center>
        </div>
     </ion-content>
 </ion-pane>
<ion-view>

当用户按下应用程序中的箭头按钮时,所有这些都将被调用,该按钮将带他们到个人资料页面查看一些信息。下面的代码出现在前一个视图中。

Ionic View (Search Results)

<ion-item class="item item-avatar item-button-right" ng-repeat="user in results" ng-controller="EmployeeCtrl">
            <img ng-src="data:image/png;base64,{{user.pic}}">
            <strong>{{user.first_name}} {{user.last_name}}</strong>
            <div class="buttons" style="padding:20px;">
                <button type="button" class="button button-icon ion-ios-telephone-outline customSearchIcon" ng-click=""></button>
                <a class="button button-icon ion-ios-arrow-right customSearchIcon" ng-click="setId(user.id)" href="#/tab/search/profile"></a>
                <button type="button" class="button button-icon ion-ios-heart-outline customSearchIcon" ng-click="addFavorite(user.id, user.first_name, user.last_name, user.pic)"></button>
            </div>
        </ion-item>

本质上,用户单击persons选项卡,将其带到配置文件,我的工厂使用该配置文件进行RESTful调用,以返回包含该用户数据的JSON对象。除了在Ionic View中没有显示任何内容。如果我硬编码一个userId在控制器和拿走函数setId()它的工作,但这显然不是一个选项。有人觉得我做错了什么吗?我在这个问题上已经纠结了好几个小时了,如果有任何帮助就太好了。

我留下了很多代码来表达我的观点

编辑

你看到的两个视图是不同的离子模板。所以使用ng-controller="EmployeeCtrl不会在同一个视图中发生两次

错误在于,在单击箭头时,调用服务并将数据存储到作用域变量,然后导航到第二个视图。第二个视图虽然使用相同的控制器作为第一个视图,一个新的控制器被实例化与空范围-因此你的视图是空的。

而不是<a>标记中的ng-click,修改您的配置文件路由以传递用户id - tab/search/profile/:userid和锚标记中有ng-href= "#/tab/search/profile/{{user.id})",并在您的配置文件控制器中从查询字符串($location.search().userid)获得用户id并进行Ajax调用。