$範圍未定義在視圖中，但不在控制器中

Question

我有一個$scope需要顯示國家列表中選擇的ISO代碼。

所以國家名單正在進賬$ HTTP調用工廠，並將其填充到一個範圍，到目前爲止好這裏

///////// get countries //////////////// 
tableFactory.getCountries().then(function(data){ 
    $scope.presentCountries = data; 
}); 

presentCountries將被髮送到typeahead當用戶將鍵入的國家和選擇它，像這樣：

<div class="countrySearchField"> 
    <div class="row"> 
     <h3 class="searchTitle">Pick a country</h3> 
    </div> 
    <input type="text" class="form-control search-input" ng-model="countryPicked" uib-typeahead="presentCountry.name for presentCountry in presentCountries | filter:{name: $viewValue}:startsWith" typeahead-min-length="1" typeahead-on-select="onSelectCountry($item, $model, $label)" typeahead-editable="false"/> 
</div> 

一旦選中它，它會調用範圍功能onSelectCountry。

$scope.onSelectCountry = function($item, $model, $label){ 
    $scope.brandCountryCode = $item.iso_code_2; 
    // $scope.brandCountryCode = $item; 
    console.log($scope.brandCountryCode); 

} 

我可以看到的數據，$scope.brandCountryCode，從執行console.log控制檯，而不是在模態視圖（覆蓋圖）。

<div class="row subtitleModalRow"> 
    <h5 class="unlock-description">Please check the following parameters before merging</h5> 
    <!-- <p class="unlock-description" ng-bind-html="overlayMessage"></p> --> 
    <ul> 
     <li>Brand Country: {{brandCountryCode}}</li> 

    </ul> 
</div> 

我不明白爲什麼它沒有顯示，但我可以看到console.log輸出。我懷疑是因爲範圍是在一個函數下，但我認爲如果你設置一個值爲$scope，它應該可以在任何地方使用，如果我錯了，請糾正我。

此外，它可能是overlay視圖是typeahead html的單獨的html文件。但是，此覆蓋視圖具有控制器tablePageCtrl。控制器應該存在於兩個html文件中。

this.openModal = function(type) { 

    this.type = type; 

    if(type == 'mergeRequest'){ 
     var templateUrl = 'app/views/dataMerge/overlayMsg.html'; 
     var backdropClass = 'auth-backdrop'; 
     var controller = 'tablePageCtrl'; 
    } 

    this.modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: templateUrl, 
     controller: controller, 
     windowTopClass: 'auth-template', 
     backdrop: 'static', 
     backdropClass: backdropClass, 
    }); 
}; 

我做了測試，稱爲$scope.test = 'test'在控制器中的功能外，我看到在重疊視圖的值。我有其他基於onSelect功能的示波器正在遇到這種情況，它們都在$scope函數下。

我添加了一個初始化程序，$scope.brandCountryCode = ''，但它沒有做任何事情。如果我能解決這個問題，那麼其他人應該沒問題。

不知道這裏發生了什麼，有沒有人有任何建議。 Angular仍然是新的，你的幫助將不勝感激。謝謝！

編輯

的覆蓋模式的全方位服務代碼：

(function() { 
    'use strict'; 

    angular 
    .module('com.xad.se-tools') 
    .service('tableModalService', function($scope, $uibModal){ 

    this.modalInstance = null; 
    this.type = null; 

    this.openModal = function(type) { 
     this.type = type; 
     if(type == 'mergeRequest'){ 
     var templateUrl = 'app/views/dataMerge/overlayMsg.html'; 
     var backdropClass = 'auth-backdrop'; 
     var controller = 'tablePageCtrl'; 
     } 

     this.modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: templateUrl, 
     // controller: 'AuthCtrl', 
     controller: controller, 
     windowTopClass: 'auth-template', 
     backdrop: 'static', 
     backdropClass: backdropClass, 
     scope: $scope 
     }); 
    }; 

    this.closeModal = function() { 
     this.modalInstance.dismiss('cancel'); 
    } 

    }); 

})(); 

Answer 1

我認爲你應該在你的模式的實例來設置模式使用範圍設置scope配置選項：

this.modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: templateUrl, 
     controller: controller, 
     windowTopClass: 'auth-template', 
     backdrop: 'static', 
     backdropClass: backdropClass, 
     scope: $scope 
     }); 

請檢查角度bootstrap模態文件here獲取更多信息尾巴。