为什么$scope.Templt_Kind_ID在引导弹出窗口关闭后没有改变？
注意：在从弹出窗口中检索下拉列值之前，我不会关闭弹出窗口。
我使用编辑控件调用bootstrap弹出窗口。
用户更改下拉列值后，将调用
$scope.onSelectChangeTemplate_kind = function ()
在下面的函数中，
var ddlID = $scope.selectedCountry; contains the correct value.
$scope.Templt_Kind_ID = ddlID; // << $scope.Templt_Kind_ID = 34 as it should be
关闭弹出窗口后，我预计$scope.Templt_Kind_ID = 34
但它包含-1，它首先被初始化为。{/ p>
为什么呢？ $scope.Templt_Kind_ID应= 34
的JavaScript
app.controller('APIController', function ($scope, $window, $element, $log, $http, APIService) {
$scope.Templt_Kind_ID = -1; // << Initial value
// Bootstrap popup. After dropdown in bootstrap is changed, this is called.
// I tried a number of things including $scope.onSelectChangeTemplate_kind = function ($scope)
$scope.onSelectChangeTemplate_kind = function () {
var ddlID = $scope.selectedCountry; // << contains correct value
$scope.Templt_Kind_ID = ddlID; // << $scope.Templt_Kind_ID = 34 as it should be
}
// Bootstrap popup is closed.
// Why is $scope.Templt_Kind_ID=-1 although it shuold be 34 ?????
// Why is $scope.Templt_Kind_ID=-1 although it shuold be 34 ?????
$scope.hide = function () {
console.log('model one hidden Templt_Kind_ID=' +
$scope.Templt_Kind_ID); // <<<<<<
// << $scope.Templt_Kind_ID is still -1 although it shuold be 34
$scope.showModal1 = false;
}
})
<html>
<modal-body>
<div ng-controller="APIController">
<select id="ddlSelectedCountry" ng-model="selectedCountry" ng-change="onSelectChangeTemplate_kind()">
@*3-SP Insert*@
<option value="">Select Account</option>
<option
ng-model="selectedCountry"
ng-repeat="item in list_Template_kind" value="{{item.Templt_Kind_ID}}"
>
{{item.Templt_Kind_ID}}-{{item.Templt_Kind_Name}}
</option>
</select>
</div>
</modal-body>
</html>
答案 0 :(得分：0)
正如我在评论中所建议的那样，您可以使用原生角度模块。
在这里打开模态并选择模板，当您单击OK时，模态会将所选模板返回给控制器：
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctrl', ['$scope', '$uibModal', '$log', function($scope, $uibModal, $log) {
// function to open the Modal from the view, the function accept "selection" argument that will be sent to the model's controller
$scope.openModal = function (selection) {
var modalInstance = $uibModal.open({
templateUrl: 'modal.html',
resolve: {
// Pass a pre selection template to the Model's controller (pass null if you don't want to pre select)
selection: function() { return selection; }
},
controller: function($scope, $uibModalInstance, selection) {
// save the preselected template and display it on the model's select box
$scope.selectedTemplate = selection;
// Mock of the actual list of templates
$scope.list_Template_kind = [
{ Templt_Kind_ID: 1, Templt_Kind_Name: 'Template 1' },
{ Templt_Kind_ID: 2, Templt_Kind_Name: 'Template 2' },
{ Templt_Kind_ID: 3, Templt_Kind_Name: 'Template 3' },
{ Templt_Kind_ID: 4, Templt_Kind_Name: 'Template 4' }
];
// OK button was clicked
$scope.ok = function () {
// Send the selected template back to the main controller
$uibModalInstance.close($scope.selectedTemplate);
};
// CANCEL button was clicked
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
// The "$uibModal.open()" returns a promise that resolves when called "$uibModalInstance.close()" from the model's controller
// or rejected when you call "$uibModalInstance.dismiss()".
// You can pass any value to those promise functions from the Model controller and use it in the resolve/reject callbacks
modalInstance.result.then(function (selectedItem) {
// Get the selected template sent back from the modal ($uibModalInstance.close($scope.selectedTemplate);)
$scope.selected = selectedItem;
}, function () {
// The user clicked on the "cancel" button
$log.info('modal-component dismissed at: ' + new Date());
});
}
}]);<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="app" ng-controller="ctrl">
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title">The modal!</h3>
</div>
<div class="modal-body">
<select id="selectedTemplate" ng-model="selectedTemplate" ng-change="onSelectChangeTemplate_kind()">
<option value="">Select Account</option>
<option ng-repeat="item in list_Template_kind" value="{{item.Templt_Kind_ID}}">
{{item.Templt_Kind_ID}}-{{item.Templt_Kind_Name}}
</option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<! -- Call "openModal" and pass "null" so no pre selection is displayed in the modal -->
<button ng-click="openModal(null)">Open</button>
<! -- Call "openModal" and pass "2" so "Template 2" will be preselected in the modal -->
<button ng-click="openModal('2')">Open (Preselect 2)</button>
<! -- Call "openModal" and pass the {{ selected }} property so the last template selected since you last closed the modal will be shown in the modal -->
<button ng-click="openModal(selected )">Open (Preselect last selected)</button>
<! -- Show the last selected template in the view (For debugging purposes) -->
<span ng-if="selected">{{ 'selected - ' + selected }}</span>
</div>