编辑:我在这里重新创建了问题http://plnkr.co/edit/w6yJ8KUvD3cgOrr56zH3?p=preview
我是angularjs的新手,我正在尝试使用一些数据创建一个popupmodal ..
我无法理解为什么在我第一次打开它时它是空的,而第二次(等等)它是好的。好的,我的意思是标题就在那里。因此,每次重新加载页面时,它都是第一次为空。
你能看到我错过的东西吗?
ModalController.js:
angular.module("Modal")
.controller("ModalController",
[
"$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
function($scope, $uibModal, $log, ModalService, AuthenticationService) {
AuthenticationService.GetCurrentWindowsUser(function(username) {
$scope.username = username;
});
$scope.openModal = function () {
AuthenticationService.GetItems($scope.username, function(items) {
$scope.items = items;
});
$scope.animationsEnabled = true;
$uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modals/items.html',
controller: 'ModalInstanceController',
size: 'lg',
resolve: {
funds: function() {
return $scope.items;
}
}
});
};
}
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.ok = function() {
$uibModalInstance.close();
};
});
items.html:
<div class="container" ng-controller="ModalController">
<script type="text/ng-template" id="modals/items.html">
<div class="modal-header">
<h3 class="text-centered">items</h3>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">SELECT</button>
</div>
</script>
</div>
Home.html中:
<div class="container" ng-controller="ModalController">
<button type="button" class="btn btn-default" ng-click="openModal()">Large modal</button>
</div>
答案 0 :(得分:2)
我设法通过删除我想要显示的模态中的脚本标记来解决这个问题
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
答案 1 :(得分:0)
尝试以下
angular.module("Modal")
.controller("ModalController",
[
"$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
function($scope, $uibModal, $log, ModalService, AuthenticationService) {
AuthenticationService.GetCurrentWindowsUser(function(username) {
$scope.username = username;
});
$scope.openModal = function () {
AuthenticationService.GetItems($scope.username, function(items) {
$scope.items = items;
$scope.animationsEnabled = true;
$uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modals/items.html',
controller: 'ModalInstanceController',
size: 'lg',
resolve: {
items: function() {
return $scope.items;
}
}
});
});
};
}
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.ok = function() {
$uibModalInstance.close();
};
});
这可能是你的决定被称为资金,而不是被传递到你的modalInstanceController
答案 2 :(得分:0)
angular.module("Modal")
.controller("ModalController",
[
"$scope", "$uibModal", "$log", "ModalService", "AuthenticationService",
function($scope, $uibModal, $log, ModalService, AuthenticationService) {
AuthenticationService.GetCurrentWindowsUser(function(username) {
$scope.username = username;
});
$scope.openModal = function () {
AuthenticationService
.GetItems($scope.username, function(items) {
$scope.items = items;
$scope.animationsEnabled = true;
showModal();
});
};
function showModal(){
$uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modals/items.html',
controller: 'ModalInstanceController',
size: 'lg',
resolve: {
funds: $scope.items
}
});
}
}
])
.controller('ModalInstanceController', function($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.ok = function() {
$uibModalInstance.close();
};
});
稍微改写了一下。
如果服务尚未完成,那么第一次调用模态$ scope.items时会有误。看看我的例子是否有效。问题将在异步调用完成之前运行其他东西。第二轮它的工作原理是使用以前的$ scope.items数据。你应该尝试使用某种形式的承诺。你的服务看起来像什么剂量?