AngularJS $ scope变量不会在使用GET请求的离子视图中显示

时间：2020-12-15 22:59:38

I am having an issue displaying response data, returned from my factory,inside an ionic view page. I believe the issue has something to do with the way I am handling the promise, but I cannot pinpoint why. So to start the roadmap to my problem, here is my:

我在离子视图页面内显示从工厂返回的响应数据时出现问题。我认为这个问题与我处理承诺的方式有关,但我无法确定原因。所以要开始我的问题的路线图,这是我的:

Factory

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

The above code returns the JSON object I need for my controller so:

上面的代码返回我的控制器所需的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;
    };
}])

Now when my page displays I want it to look like such:

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

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>

All of this is invoked whenever a user presses on an arrow button in the app which should take them to their profile page to view some info. The following code appears in the previous 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>

So essentially a user clicks on a persons tab, takes them to that profile where my factory is used to make a RESTful call to return a JSON object containing data about that user. Except nothing is being displayed in the Ionic View. If I hard code a userId in the controller and take away the function setId() it works but that obviously isn't an option. Does anyone see anything specifically that I am doing wrong? Been stuck on this for hours any help would be great.

所以基本上用户点击人员选项卡,将他们带到我的工厂用于进行RESTful调用以返回包含该用户数据的JSON对象的配置文件。除了Ionic View中没有显示任何内容。如果我在控制器中硬编码userId并带走函数setId()它可以工作但显然不是一个选项。有没有人特别看到我做错了什么?被困在这几个小时,任何帮助都会很棒。

I left a lot of code out to get my point across.

我留下了很多代码来解释我的观点。

EDIT

The two views you see are different ionic templates. So using ng-controller="EmployeeCtrl is not happening twice in the same view.

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

1 个解决方案

#1

1  

The mistake is, on arrow click, you call the service and store the data to scope variable and then navigates to second view. The second view though uses the same controller as the first view, a new controller is being instantiated with empty scope - and hence your view is empty.

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

Instead of ng-click in <a> tag, modify your profile route to pass the userid as well - tab/search/profile/:userid and in anchor tag have ng-href= "#/tab/search/profile/{{user.id})" and in your profile controller get the userid from query string ($location.search().userid) and make the Ajax call.

而不是ng-click in 标签,修改你的个人资料路线以传递用户ID - tab / search / profile /:userid和在锚标签中有ng-href =“#/ tab / search / profile / {{ user.id})“并在您的配置文件控制器中从查询字符串($ location.search()。userid)获取用户ID并进行Ajax调用。

#1

1  

The mistake is, on arrow click, you call the service and store the data to scope variable and then navigates to second view. The second view though uses the same controller as the first view, a new controller is being instantiated with empty scope - and hence your view is empty.

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

Instead of ng-click in <a> tag, modify your profile route to pass the userid as well - tab/search/profile/:userid and in anchor tag have ng-href= "#/tab/search/profile/{{user.id})" and in your profile controller get the userid from query string ($location.search().userid) and make the Ajax call.

而不是ng-click in 标签,修改你的个人资料路线以传递用户ID - tab / search / profile /:userid和在锚标签中有ng-href =“#/ tab / search / profile / {{ user.id})“并在您的配置文件控制器中从查询字符串($ location.search()。userid)获取用户ID并进行Ajax调用。

标签：

相关文章