2016-01-19 69 views
0

我需要在兩個不同的控制器上使用相同的數據,一個是頁面,另一個是模態彈出窗口。我創建的服務將執行$ http.get來提取數據。但是,當我將服務應用於Modal Popup時,它會停止加載,甚至數據不會在任何地方加載。無法訪問兩個控制器上的服務AngularJs

我的服務

(function(){ 
    'use strict'; 
    angular.module('sspUiApp.services') 
    .service('AdUnitService', ['$http', '$rootScope', 'API_URL', function($http, $scope, API_URL) { 
     var data = $http.get('data/selectAdUnits.json'); 

     return { 
     getAdFormats: function() { 
      console.log("inside function"); 
      return data; 
     }, 
     setAdFormats: function(value) { 
     } 
     } 
    }]); 
})(); 

我都與服務控制器添加。

(function(){ 
    'use strict'; 

    angular.module('sspUiApp.controllers') 
    .controller('AdUnitFormatCtrl', ['$scope', '$state', 'AdUnitService', function ($scope, $state, AdUnitService) { 
     $scope.details = AdUnitService.getAdFormats(); 
    }]) 

    .controller('ModalDemoCtrl', ['AdUnitService', function ($scope, $uibModal, AdUnitService) { 
     $scope.open = function (size) { 
     // $scope.details = AdUnitService.getAdFormats(); 
     $scope.$modalInstance = $uibModal.open({ 
      scope: $scope, 
      templateUrl: 'views/select_ad_format.html', 
      size: size, 
     }); 
     }; 
     $scope.cancel = function() { 
     $scope.$modalInstance.dismiss('cancel'); 
     }; 

     $scope.details = AdUnitService.getAdFormats(); 
     alert($scope.details); 
    }]) 
})(); 

和HTML

<div id="selectAdFormats" ng-controller="ModalDemoCtrl"> 
    <div class="container"> 
    <div class="ad-format-section"> 
     <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-2 col-xs-6 selectedAdFormatData" ng-repeat="frmt in details.adformat"> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> 
       <img ng-src="../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> 
       <span class="formatName">{{ frmt.name }}</span> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> 
       <span class="resSize">{{ frmt.size }}</span> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 
+0

我不相信你正在使用的模式的實例如預期。通過讓模態自行打開,你不得不提前使用它的範圍。另外,看起來你會喜歡使用'resolve'語法傳遞依賴關係而不是傳入整個'$ scope'的能力。我認爲它可以在這種情況下提供幫助,並將調用控制器所需的變量傳遞給調用控制器,而不是通過服務共享數據。 – tylerwal

回答

0
angular.module('sspUiApp.services') 
angular.module('sspUiApp.controllers') 

你的服務是不同的模塊,這就是爲什麼你不能得到它,如果你聲明成同一個模塊它應該工作

選項2:

將您的第二個模塊sspUiApp.services放入您的sspUiApp.controllers

更多信息:Angular js seperation to different modules in different js files


更新:

var data = $http.get('data/selectAdUnits.json'); 

return { 
    getAdFormats: function() { 
     console.log("inside function"); 
     return data; 
    }, 
    setAdFormats: function(value) {} 
} 

的問題是在於數據是asynchronious,你不把它像這樣:

$scope.details = AdUnitService.getAdFormats(); 
alert($scope.details); 

您嘗試提醒承諾,而不是等待它解決並提醒結果,如果你cha它應該工作如下它應該工作:

AdUnitService.getAdFormats().then(function(details) { 
    alert(details);  
}); 

這種方式角將在執行代碼之前等待結果。

約這裏角承諾更多信息:https://docs.angularjs.org/api/ng/service/ $ Q

+0

app.js文件中已經提到了服務和控制器的依賴關係。我正在獲取對象對象數據,但它沒有在頁面上查看。 –

+0

@ user422831我已經更新了我的答案 –

相關問題