AngularJS $ scope變量不會在使用GET請求的離子視圖中顯示

我有一個問題，顯示從我的工廠返回的離子視圖頁面內的響應數據。我相信這個問題與我處理承諾的方式有關，但我不明白爲什麼。因此，要啓動路線圖，我的問題，這是我的：

廠

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

現在，當我的頁面顯示我想看起來像這樣：

離子視圖（配置文件）

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

所有這一切都被調用時上的箭頭按鈕，在應用程序，它應該帶他們去他們的個人資料頁面的用戶按下查看一些信息。以下代碼出現在前一個視圖中。

離子視圖（搜索結果）

<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對象的個人資料有關該用戶的數據。除了離子視圖中沒有顯示任何內容。如果我在控制器中硬編碼userId並刪除函數setId（）它可以工作，但顯然這不是一個選項。有沒有人看到任何具體的，我做錯了？一直困住這幾個小時，任何幫助都會很大。

我留下了大量的代碼來表達我的觀點。

編輯

您所看到的兩種觀點是不同的離子模板。因此使用ng-controller =「EmployeeCtrl在同一視圖中不會發生兩次。

來源

2016-09-19 Sam5487

錯誤是，在箭頭單擊時，您調用服務並將數據存儲到範圍變量，然後導航到第二個視圖。第二視圖，雖然使用相同的控制器作爲第一種觀點，新的控制器被實例化空範圍 - 因此你的看法是空

代替ng-click在<a>標籤，修改配置文件路徑通過用戶ID以及 - tab/search/profile/:userid和錨標記有ng-href= "#/tab/search/profile/{{user.id})"，並在您的配置文件控制器從查詢字符串（$location.search().userid）獲取用戶ID並使Ajax cal湖

來源

2016-09-19 17:33:43 Developer

感謝您的快速響應！現在就來看看這個，並且會回覆你。我已經讀過一些關於視圖所處的狀態以及如何影響範圍的內容，以便現在變得更有意義。很快會回覆你。 – Sam5487

謝謝你的幫助。即使我認爲它不是空的範圍，你對新控制器實例化是完全正確的。我通過簡單地將代碼添加到我的SearchCtrl做了一個解決方法。很明顯，我不想這樣做將來，並使用你建議的方法，但對於一個簡單的POC，這將工作，謝謝你。 – Sam5487

@ Sam5487 - 很高興我幫了忙！快樂編碼... – Developer

AngularJS $ scope變量不會在使用GET請求的離子視圖中顯示

回答

相關問題