$范围未定义在视图中，但不在控制器中

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获取更多信息尾巴。