javascript - AngularJS $scope 变量不会使用 GET 请求显示在 ionic View 中

Question

我在 ionic View 页面内显示从工厂返回的响应数据时遇到问题。我相信这个问题与我处理 promise 的方式有关，但我无法确定原因。因此，要开始解决我的问题的路线图，这是我的:

工厂

.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;
})

上面的代码返回我的 Controller 所需的 JSON 对象，因此:

Controller

.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 (配置文件)

<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>

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

ionic View (搜索结果)

<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>

因此，本质上，用户单击人员选项卡，将他们带到该配置文件，在该配置文件中，我的工厂用于进行 RESTful 调用，以返回包含有关该用户的数据的 JSON 对象。除了 ionic View 中没有显示任何内容。如果我在 Controller 中硬编码一个 userId 并删除函数 setId() 它可以工作，但这显然不是一个选项。有没有人具体看到我做错了什么？被困在这个问题上几个小时了，任何帮助都会很棒。

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

编辑

您看到的两个 View 是不同的 ionic 模板。因此，使用 ng-controller="EmployeeCtrl 不会在同一 View 中发生两次。

Answer 1

错误是，单击箭头时，您调用服务并将数据存储到作用域变量，然后导航到第二个 View 。尽管第二个 View 使用与第一个 View 相同的 Controller ，但正在用空范围实例化新 Controller - 因此您的 View 是空的。

而不是 ng-click在<a>标签，修改您的个人资料路由以传递用户 ID - tab/search/profile/:userid并在 anchor 标记中有 ng-href= "#/tab/search/profile/{{user.id})"并在您的个人资料 Controller 中从查询字符串 ( $location.search().userid ) 获取用户 ID 并进行 Ajax 调用。