我有$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);
}
我可以在console.log的控制台中看到数据$scope.brandCountryCode
,但不能在模态视图(叠加视图)中看到。
<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
,它应该随处可用,如果我错了请纠正我。
此外,可能是覆盖视图是来自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');
}
});
})();