在我的角度消息应用程序中,我可以选择从模板中选择消息。 我需要将模板列表打开为模态。
我的问题是我有一个模板列表作为控制器+视图
如何在不复制模板列表代码的情况下打开视图。
$stateProvider
.state('app', {})
.state('app.email', {
}).state('app.email.compose', {
url: '/compose',
data: {
pageTitle: 'Email Compose'
},
templateUrl: 'Assets/app/templates/email_compose.html'
})
.state('app.manage', {
})
.state('app.manage.templates', {
template: '<div ui-view></div>',
url: '/templates',
abstract: true
})
.state('app.manage.templates.list', {
url: '/',
data: {
pageTitle: 'Email List'
},
templateUrl: 'Assets/app/templates/tamplate_list.html'
});
在我的应用路线中,我想打开app.manage.template.list
从app.email.compose
作为模态
我该怎么做?
答案 0 :(得分:1)
这可以使用UI-Bootstrap轻松完成:https://angular-ui.github.io/bootstrap/演练:
加载Bootstrap CSS资产,注意不需要JS和jQuery:
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
加载UI-Bootstrap资产:
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
在您的应用程序中注入ui.bootstrap
模块:
angular.module('app', [
'ui.router',
'ui.bootstrap'
]);
使用州定义的onEnter
方法打开新模式:
.state('myModalState', {
'url': '/myModalUrl',
'onEnter': [
'$uibModal',
function ($uibModal) {
$uibModal.open({
'controller': 'myModalController',
'templateUrl': 'myModalTemplate.html'
}).result.then(
function closed (item) {
// Executed when uibModalInstance is closed, returns value
},
function dismissed () {
// Executed when modal is dismissed/canceled
}
);
}
]
});
为模态创建一个控制器并注入$uibModalInstance
:
.controller('myModalController', [
'$scope', '$uibModalInstance',
function ($scope, $uibModalInstance) {
$scope.item = 'foobar';
$scope.ok = function () {
$uibModalInstance.close($scope.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
]);
最后是模态的模板:
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div><!-- /.modal-header -->
<div class="modal-body">
{{item}}
</div><!-- /.modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancel()">
Cancel
</button>
<button type="button" class="btn btn-success" ng-click="ok()">
Ok
</button>
</div><!-- /.modal-footer -->
现在,每当您访问/myModalUrl
或ui-sref
或state.go
至myModalState
时,模式都会自动打开。
Stacksnippet:
angular.module('app', [
'ui.router',
'ui.bootstrap'
]);
angular.module('app').config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('root', {
url: '/',
templateUrl: 'root.html',
});
$stateProvider.state('modal', {
url: '/modal',
onEnter: [
'$uibModal', '$state',
function ($uibModal, $state) {
$uibModal.open({
'controller': 'modal',
'templateUrl': 'modal.html',
}).result.then(
function closed (item) {
// Executed when uibModalInstance is closed, returns value
$state.go('root');
},
function dismissed () {
// Executed when modal is dismissed/canceled
$state.go('root');
}
);
}
]
});
}
]);
angular.module('app').controller('modal', [
'$scope', '$uibModalInstance',
function ($scope, $uibModalInstance) {
$scope.item = 'foobar';
$scope.ok = function () {
$uibModalInstance.close($scope.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script type="text/ng-template" id="root.html">
<a ui-sref="modal">Open route in modal</a>
</script>
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
{{item}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancel()">
Cancel
</button>
<button type="button" class="btn btn-success" ng-click="ok()">
Ok
</button>
</div>
</script>
</head>
<body ui-view></body>
</html>
Plunker:http://plnkr.co/edit/5qrD7hB6i8vQEqa8jZ1G?p=preview
关于在进入状态时打开模态的UI-Router常见问题解答(请注意,由于UI引导模式指令的某些更改,它已过时):
这是UI-Bootstrap的模态指令的参考:
答案 1 :(得分:0)
我通过将路由添加为来自其他州的“child”来解决此问题,该路由引用相同的templateUrl Just (3 +)
templateUrl: 'Assets/app/templates/tamplate_list.html'