Javascript 如何打开多模式窗口并在模式导航中使用
我有一个问题，我认为与ng包括，但我不确定。我会尽可能地描述它。这里是一个小背景。我正在使用bootstrap中的模式服务，并创建了一个视图和一个控制器，该视图和控制器应该用作包装器。这个想法是在一个模态中注入任何视图。下面是“modaltemplate.html”的html片段 因此，当模态打开routeName并在modalCtrl.js中处理参数时。部分代码是从angular代码库劫持的。简而言之，它定位要绑定到上述ng include的模板的url，并将所有参数设置为$scope上的routeParams，如下所示Javascript 如何打开多模式窗口并在模式导航中使用,javascript,angularjs,twitter-bootstrap,Javascript,Angularjs,Twitter Bootstrap,我有一个问题，我认为与ng包括，但我不确定。我会尽可能地描述它。这里是一个小背景。我正在使用bootstrap中的模式服务，并创建了一个视图和一个控制器，该视图和控制器应该用作包装器。这个想法是在一个模态中注入任何视图。下面是“modaltemplate.html”的html片段 因此，当模态打开routeName并在modalCtrl.js中处理参数时。部分代码是从angular代码库劫持的。简而言之，它定位要绑定到上述ng include的模板的url，并将所有参数设置为$scope上的ro
$scope.routeParams = next.params;
//ep: set the templateUrl for the 'view' so that modal.html will load it in.
$scope.templateUrl = next.$$route.templateUrl;
<div tabindex="-1" class="modal fade in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="0" animate="animate" style="z-index: 1050; display: block;">
<div class="modal-dialog">
<div class="modal-content" ng-transclude="">
<div data-ng-controller="modalCtrl" class="ng-scope">
<!-- ngInclude: templateUrl -->
<div data-ng-include="templateUrl" class="ng-scope">
<div id="editRelatedInsured" data-ng-controller="inRelatedInsuredEditCtrl" class="ng-scope">
<div class="modal-header">
<h3 class="lineset ng-binding">Add Related Insured</h3>
</div>
<form role="form" name="editRelatedInsuredForm" class="ng-pristine ng-valid">
</form>
</div>
</div>
</div>
<div tabindex="-1" class="modal fade in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="1" animate="animate" style="z-index: 1060; display: block;">
<div class="modal-dialog"><div class="modal-content" ng-transclude="">
<div data-ng-controller="modalCtrl" class="ng-scope">
<!-- ngInclude: templateUrl -->
<div data-ng-include="templateUrl" class="ng-scope">
<div id="editRelatedInsured" data-ng-controller="inRelatedInsuredEditCtrl" class="ng-scope">
<div class="modal-header">
<h3 class="lineset ng-binding">{{routeParams.viewTitle}}</h3>
</div>
<form role="form" name="editRelatedInsuredForm" class="ng-pristine ng-valid">
</form>
</div>
</div>
</div>
var startRouteName = 'InsuredExceptionAdd';
var params = {
mode: 'add',
viewTitle: "Add Insured Exception",
insuredId: insuredId,
};
$scope.openEditModal(startRouteName, params, $scope);
$scope.routeParams = next.params;
//ep: set the templateUrl for the 'view' so that modal.html will load it in.
$scope.templateUrl = next.$$route.templateUrl;
<div tabindex="-1" class="modal fade in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="0" animate="animate" style="z-index: 1050; display: block;">
<div class="modal-dialog">
<div class="modal-content" ng-transclude="">
<div data-ng-controller="modalCtrl" class="ng-scope">
<!-- ngInclude: templateUrl -->
<div data-ng-include="templateUrl" class="ng-scope">
<div id="editRelatedInsured" data-ng-controller="inRelatedInsuredEditCtrl" class="ng-scope">
<div class="modal-header">
<h3 class="lineset ng-binding">Add Related Insured</h3>
</div>
<form role="form" name="editRelatedInsuredForm" class="ng-pristine ng-valid">
</form>
</div>
</div>
</div>
<div tabindex="-1" class="modal fade in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="1" animate="animate" style="z-index: 1060; display: block;">
<div class="modal-dialog"><div class="modal-content" ng-transclude="">
<div data-ng-controller="modalCtrl" class="ng-scope">
<!-- ngInclude: templateUrl -->
<div data-ng-include="templateUrl" class="ng-scope">
<div id="editRelatedInsured" data-ng-controller="inRelatedInsuredEditCtrl" class="ng-scope">
<div class="modal-header">
<h3 class="lineset ng-binding">{{routeParams.viewTitle}}</h3>
</div>
<form role="form" name="editRelatedInsuredForm" class="ng-pristine ng-valid">
</form>
</div>
</div>
</div>
添加相关被保险人
$scope.routeParams = next.params;
//ep: set the templateUrl for the 'view' so that modal.html will load it in.
$scope.templateUrl = next.$$route.templateUrl;
<div tabindex="-1" class="modal fade in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="0" animate="animate" style="z-index: 1050; display: block;">
<div class="modal-dialog">
<div class="modal-content" ng-transclude="">
<div data-ng-controller="modalCtrl" class="ng-scope">
<!-- ngInclude: templateUrl -->
<div data-ng-include="templateUrl" class="ng-scope">
<div id="editRelatedInsured" data-ng-controller="inRelatedInsuredEditCtrl" class="ng-scope">
<div class="modal-header">
<h3 class="lineset ng-binding">Add Related Insured</h3>
</div>
<form role="form" name="editRelatedInsuredForm" class="ng-pristine ng-valid">
</form>
</div>
</div>
</div>
<div tabindex="-1" class="modal fade in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" index="1" animate="animate" style="z-index: 1060; display: block;">
<div class="modal-dialog"><div class="modal-content" ng-transclude="">
<div data-ng-controller="modalCtrl" class="ng-scope">
<!-- ngInclude: templateUrl -->
<div data-ng-include="templateUrl" class="ng-scope">
<div id="editRelatedInsured" data-ng-controller="inRelatedInsuredEditCtrl" class="ng-scope">
<div class="modal-header">
<h3 class="lineset ng-binding">{{routeParams.viewTitle}}</h3>
</div>
<form role="form" name="editRelatedInsuredForm" class="ng-pristine ng-valid">
</form>
</div>
</div>
</div>
{{routeParams.viewTitle}
这是ng包含和作用域的问题吗？我不知道为什么ng include会被处理两次，为什么它会影响以前的模式。这几乎就像对模板url的更改被传递到两个modalCtrl实例一样 好吧，我终于明白了。必须重写某些部分，但现在它可以正常工作。该控制器将允许打开多个模态，还将处理模态窗口内的导航 editModal.js
(function () {
'use strict';
var app = angular.module('app');
app.run(function ($modal, $modalStack, $rootScope, $route, $routeParams, $location, $q, $sce, $injector, $http, $templateCache) {
$rootScope.openEditModal = function (startRouteName, parameters, scope) {
function afterModalOpened($scope) {
$scope.title = "modalCtrl";
// ep: keep track of modal windows open for edit
// $modalStack keeps list of all opened windows, but that is not good for us
// saving... and loading... are also modals and they appear as top most window so
// $modalStack.getTop().value.modalScope.$id does not work always , and in order to
// responsed to $locationChangeStart events by top most open edit modal we need this list
$rootScope.editModalsScopes = $rootScope.editModalsScopes || [];
$rootScope.editModalsScopes.push($scope);
console.log("modalCtrl.afterModalOpened - $scope.$id: " + $scope.$id + " " + " startRouteName: " + startRouteName);
//ep: overwrite default implementation os $scope.$close from modal window
var closeModal = $scope.$close;
$scope.$close = function (payload) {
console.log("scope closing the modal: " + $scope.$id);
// $scope.$emit("ModalClosing");
offLocationChangeStart();
closeModal(payload);
$rootScope.editModalsScopes.pop();
};
//ep: overwrite default implementation os $scope.$dismiss from modal window
var dismissModal = $scope.$dismiss;
$scope.$dismiss = function (reason) {
console.log("scope canceling the modal: " + $scope.$id);
// $scope.$emit("ModalCanceling");
offLocationChangeStart();
dismissModal(reason);
$rootScope.editModalsScopes.pop();
};
//ep: following section deals witn in-modal navigation
// when we don't want to close window before progressing to a next window
// one can use $scope.navigateTo(routeName, paramters) to switch the content within the modal window
var callerLocation = {};
angular.copy($location, callerLocation);
//ep: remember the return function so we can de-register it
var offLocationChangeStart = $scope.$on('$locationChangeStart', function (event) {
//ep: so that that angular base would not process this also,
// navigation is localized to modal window
event.preventDefault();
var topEditModalScope = $rootScope.editModalsScopes[$rootScope.editModalsScopes.length - 1];
console.log("in $locationChangeStart");
console.log(" $scope.$id = " + $scope.$id + " " + $scope.title);
console.log(" top most edit modal window $scope.$id " + topEditModalScope.$id);
console.log(" event.currentScope.$id = " + event.currentScope.$id);
console.log(" event.targetScope.$id = " + event.targetScope.$id);
//process locationChangeStart events only by the top edit modal window, currently active one
if (topEditModalScope.$id !== $scope.$id) {
console.log("$locationChangeStart - aborting processing due to scope id diferences");
return;
}
//ep: this could be problematic when there are search parameters and reload is true
//but for now it all works fine, address if and when needed
if ($location.$$path == callerLocation.$$path) {
$scope.$dismiss("back-button");
}
var route = $location.$$path;
console.log(" about to process route " + route);
//ep: this will ad entry on the $scope.routeParams and set templateUrl that modal's ng-include is bound to.
// all objects that are on passed will be passed as route paramters. Complex objects will be converted to JSON
// on receiving side one has to convert them back.
$q.when(processRoute()).then(function () {
console.log(" finished processing route " + route);
});
});
activate();
function activate() {
$scope.routeParams = parameters;
$scope.templateUrl = $scope.getTemplateUrl(startRouteName);
}
//ep: this code was lifted from anuglar-route.js/updateRoute() and modified to process
//route, get the templateUrl and routeParameters, set them on the $scope, but not raise any events.
function processRoute() {
var next = parseRoute(),
last = $route.current;
if (next || last) {
//forceReload = false;
//$rootScope.$broadcast('$routeChangeStart', next, last);
//$route.current = next;
if (next) {
if (next.redirectTo) {
if (angular.isString(next.redirectTo)) {
$location.path(interpolate(next.redirectTo, next.params)).search(next.params)
.replace();
} else {
$location.url(next.redirectTo(next.pathParams, $location.path(), $location.search()))
.replace();
}
}
}
$q.when(next).
then(function () {
if (next) {
var locals = angular.extend({}, next.resolve),
template, templateUrl;
angular.forEach(locals, function (value, key) {
locals[key] = angular.isString(value) ?
$injector.get(value) : $injector.invoke(value);
});
if (angular.isDefined(template = next.template)) {
if (angular.isFunction(template)) {
template = template(next.params);
}
} else if (angular.isDefined(templateUrl = next.templateUrl)) {
if (angular.isFunction(templateUrl)) {
templateUrl = templateUrl(next.params);
}
templateUrl = $sce.getTrustedResourceUrl(templateUrl);
if (angular.isDefined(templateUrl)) {
next.loadedTemplateUrl = templateUrl;
template = $http.get(templateUrl, { cache: $templateCache }).
then(function (response) { return response.data; });
}
}
if (angular.isDefined(template)) {
locals['$template'] = template;
}
return $q.all(locals);
}
}).
// after route change
then(function (locals) {
console.log("processRoute.afterRouteChange $scope.id: " + $scope.$id + " - " + $scope.title);
//angular.copy(next.params, $scope.routeParams);
//ep: make routeParams available to the next "view" handled by the modal
$scope.routeParams = next.params;
//ep: set the templateUrl for the 'view' so that modal.html will load it in.
$scope.templateUrl = next.$$route.templateUrl;
//modalScope.templateUrl = next.$$route.templateUrl; //^
//if (next == $route.current) {
// if (next) {
// next.locals = locals;
// angular.copy(next.params, $routeParams);
// }
// $rootScope.$broadcast('$routeChangeSuccess', next, last);
// }
}, function (error) {
if (next == $route.current) {
//$rootScope.$broadcast('$routeChangeError', next, last, error);
}
});
}
}
//ep:copied from anuglar-route.js
function parseRoute() {
// Match a route
var params, match;
angular.forEach($route.routes, function (route, path) {
if (!match && (params = switchRouteMatcher($location.path(), route))) {
match = inherit(route, {
params: angular.extend({}, $location.search(), params),
pathParams: params
});
match.$$route = route;
}
});
// No route matched; fallback to "otherwise" route
return match || routes[null] && inherit(routes[null], { params: {}, pathParams: {} });
}
/**
* @param on {string} current url
* @param route {Object} route regexp to match the url against
* @return {?Object}
*
* @description
* Check if the route matches the current url.
*
* Inspired by match in
* visionmedia/express/lib/router/router.js.
*/
//ep:copied from anuglar-route.js
function switchRouteMatcher(on, route) {
var keys = route.keys,
params = {};
if (!route.regexp) return null;
var m = route.regexp.exec(on);
if (!m) return null;
for (var i = 1, len = m.length; i < len; ++i) {
var key = keys[i - 1];
var val = 'string' == typeof m[i]
? decodeURIComponent(m[i])
: m[i];
if (key && val) {
params[key.name] = val;
}
}
return params;
}
////ep: copied from angular-route core
function inherit(parent, extra) {
return angular.extend(new (angular.extend(function () { }, { prototype: parent }))(), extra);
}
}
//ep : open modal and process route and parameters
$modal.open({
template: "<div data-ng-include='templateUrl'></div>",
//templateUrl: 'app/common/modaltemplate.html',
// scope: scope,
controller: function ($scope, $modalInstance) {
$modalInstance.opened
.then(function () {
afterModalOpened($scope);
});
}
});
};
});
})();
（函数（）{
"严格使用",；
var-app=角度。模块（“app”）；
运行（函数（$modal、$modalStack、$rootScope、$route、$routeParams、$location、$q、$sce、$injector、$http、$templateCache）{
$rootScope.openeditmodel=函数（startRouteName、参数、作用域）{
模块开启后的功能（$scope）{
$scope.title=“modalCtrl”；
//ep：跟踪打开以进行编辑的模式窗口
//$modalStack保留所有打开窗口的列表，但这对我们不好
//保存…和加载…也是模态，它们显示为最上面的窗口，所以
//$modalStack.getTop（）.value.modalScope.$id并不总是有效，为了
//响应$locationChangeStart事件的最热门开放编辑模式我们需要此列表
$rootScope.editModalsScopes=$rootScope.editModalsScopes | | |[]；
$rootScope.editModalScopes.push（$scope）；
log（“modalCtrl.afterModalOpened-$scope.$id:+$scope.$id++++”startRouteName:“+startRouteName”）；
//ep：覆盖默认实现os$范围。$从模式窗口关闭
var closeModal=$scope.$close；
$scope.$close=功能（有效负载）{
log（“范围关闭模式：+$scope.$id”）；
//$scope.$emit（“ModalClosing”）；
offLocationChangeStart（）；
关闭模式（有效载荷）；
$rootScope.editModalScopes.pop（）；
};
//ep：覆盖默认实现os$范围。$从模式窗口中退出
var dismissModal=$scope.$dismise；
$scope.$dismise=函数（原因）{
log（“作用域取消模式：+$scope.$id”）；
//$scope.$emit（“ModalCanceling”）；
offLocationChangeStart（）；
解雇（理由）；
$rootScope.editModalScopes.pop（）；
};
//ep：下一节介绍模态导航中的witn
//当我们在进入下一个窗口之前不想关闭窗口时
//可以使用$scope.navigateTo（routeName，parameters）在模式窗口中切换内容
var callerLocation={}；
复制（$location，callerLocation）；
//ep：记住返回函数，这样我们就可以注销它了
变量offLocationChangeStart=$scope.$on（“$locationChangeStart”，函数（事件）{
//ep：这样角底也不会处理这个，
//导航定位到模式窗口
event.preventDefault（）；
var topEditModalScope=$rootScope.EditModalScopes[$rootScope.EditModalScopes.length-1]；
console.log（“in$locationChangeStart”）；
console.log（“$scope.id=“+$scope.id+”“+$scope.title”）；
log（“最顶端的编辑模式窗口$scope.$id”+topEditModalScope.$id