- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 Controller 中,模态视图是通过监听 $ionicView.afterEnter
事件用工厂初始化的。作为documentation建议,只要当前事件的 ionic View 即将被销毁,就应该删除模态视图。在 $ionicView.beforeLeave
回调中调用了一个函数以移除模态视图。
.controller('UserProfileCtrl', function($scope, $state, user, ModalFactory) {
$scope.user = user;
$scope.checkOrders = function() {
$state.go('app.orders');
};
$scope.$on('$ionicView.afterEnter', function() {
$scope.modals = ModalFactory.getUserProfileModals($scope, user.photos);
});
$scope.$on('$ionicView.beforeLeave', function() {
$scope.modals.remove();
});
});
.factory('ModalFactory', function($ionicModal, $ionicSlideBoxDelegate) {
var modalFactory = {};
modalFactory.getUserProfileModals = function(scope, images) {
var modals = {
'views': [],
'data': []
};
$ionicModal.fromTemplateUrl('templates/modals/common/image-view.html', { 'scope': scope }).then(function(modal) { modals.views.imageView = modal; });
if (images) {
modals.data.images = images;
}
modals.open = function(view, slide) {
Object.keys(this.views).forEach(function(key, index) {
console.log(key);
});
if (view && this.views.hasOwnProperty(view)) {
this.views[view].show();
if (view == 'imageView' && slide) {
$ionicSlideBoxDelegate.$getByHandle('image-view').slide(slide);
}
}
};
modals.close = function(view) {
Object.keys(this.views).forEach(function(key, index) {
console.log(key);
});
if (view && this.views.hasOwnProperty(view)) {
this.views[view].hide();
} else {
Object.keys(this.views).forEach(function(key, index) {
this.views[key].hide();
});
}
};
modals.remove = function() {
console.log('remove');
Object.keys(this.views).forEach(function(key, index) {
console.log(key);
});
this.data.splice(0, this.data.length);
Object.keys(this.views).forEach(function(key, index) {
this.views[key].remove();
});
this.views.splice(0, this.views.length);
};
return modals;
};
return modalFactory;
});
但是,当我按顺序执行这些操作时,我在控制台中得到以下输出:
$scope.modals.open('imageView', 1)
,$scope.modals.close()
,$state.go('app.orders')
导航到另一个页面。我试过听 $destroy
而不是 $ionicView.beforeLeave
,但是 $scope.modals.remove()
没有被调用根本。当我用 Chrome 测试我的应用程序时,似乎 $destroy
没有被触发。
谁能告诉我什么时候应该删除模态视图,为什么在我的场景中会出现这样的错误消息?
我修改了ModalFactory
中的代码如下,错误没有了。
function open(view, slide) {
if (view && modals.views.hasOwnProperty(view)) {
modals.views[view].show();
if (view == 'imageView' && slide) {
$ionicSlideBoxDelegate.$getByHandle('image-view').slide(slide);
}
}
};
function close(view) {
if (view && modals.views.hasOwnProperty(view)) {
modals.views[view].hide();
} else {
Object.keys(modals.views).forEach(function(key, index) {
modals.views[key].hide();
});
}
};
function remove() {
console.log('remove');
modals.data.splice(0, modals.data.length);
Object.keys(modals.views).forEach(function(key, index) {
modals.views[key].remove();
});
modals.views.splice(0, modals.views.length);
};
modals.open = open;
modals.close = close;
modals.remove = remove;
return modals;
最佳答案
通过使用 $scope.$on('$destroy', ..) 方法,Angular 将在拆除作用域并从其父作用域中删除作用域之前广播一个 $destroy 事件。
这是我如何解决 modal.remove() 问题的示例,
.factory('ModalFactory', function($ionicModal, $rootScope) {
var init = function(tpl, $scope) {
var promise;
$scope = $scope || $rootScope.$new();
promise = $ionicModal.fromTemplateUrl(tpl, {
scope: $scope,
animation: 'slide-in-right'
}).then(function(modal) {
$scope.modal = modal;
return modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
return promise;
};
return {
init: init
}
})
然后从 Controller 中,传递 Controller 和模态模板的当前范围
.controller('UserProfileCtrl', function($scope, $state, user, ModalFactory) {
ModalFactory.init('image-view.html', $scope)
.then(function(modal) {
confirmationModal = modal;
confirmationModal.show();
});
})
希望对您有所帮助。
关于javascript - Ionic - 什么时候应该调用 ionicModal.remove()? [Ionic Modal 隐藏回调],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35933162/
将参数传递到 $ionicModal 的最佳方法是什么?以便可以在模态中使用这些值(即 receipt.html)。 confirm.html View Receipt controller
ionic / Cordova /Angular/ios应用程序: 我正在使用 Angular-notify 来显示附加了 ng-click 事件的覆盖消息。它们显示良好,并且 ng-click 事件
这里解释了 $ionicModal 服务的用法:http://ionicframework.com/docs/api/service/ $ionicModal/ 我碰巧打开了两个以上的模式。 例如:
我通过更改宽度和高度制作了自定义 ionicModal Popup。但是,当模态隐藏时,我在处理正确位置时遇到了问题。请参阅我的代码片段以获得更清楚的信息。 无论模态大小如何,我的预期输出都是 ion
我正在尝试在应用程序启动时打开登录模式。这在 Chrome 模拟中可以正常工作,但在运行 Android 5 的 LG G3 上则不行(如果这很重要的话)。 代码(目前)很大程度上基于侧菜单启动器,它
我想在用户按下是按钮时打开 ionic 模式,但在用户按下否按钮时关闭 ionic 弹出窗口。我怎样才能做到这一点? 目前,在每种情况下都会打开 ionic 弹出窗口。这是到目前为止我的代码: ser
我在创建 $ionicModal 时似乎遇到问题当尝试将我的范围指定为 this 时而不是$scope . 由于我通过实例名称绑定(bind) Controller 中的所有内容,因此我没有使用 $s
情况: 在我的 Ionic 应用程序中,我正在测试模式的正确打开。 我已经做了几次尝试,但我收到以下错误: TypeError: Cannot read property 'then' of unde
我想知道您是否可以将 Controller 传递给 $ionicModal 服务。类似的东西。 $ionicModal.fromTemplateUrl('templates/login.html',
我正在制作一个包含大约 200 个列表项(员工)的目录应用程序。该应用程序使用 ng-repeat 按预期运行,但是加载缓慢。我切换到 Collection-Repeat 以利用速度提升,但我遇到了我
我有一个显示的模态.. 占据了屏幕的一部分,可以通过在模态 div 标签之外单击来关闭。 $scope.showMyModal = function() { $scope.modified =
我在我的 Ionic 应用程序中使用 nvd3。在一种情况下,我遇到了一个问题,即我在一个选项卡上有一个饼图,在另一个选项卡上有一个 IonicModal。打开 IonicModal 后,当我进入 P
我有一个 $ionicModal,里面有一个指令,我们称它为 ,这采用范围对象的双向数据绑定(bind)值。这是在 $ionicModal 模板中:--> 这是我的完整指令: .directiv
在我的 Controller 中,模态视图是通过监听 $ionicView.afterEnter 事件用工厂初始化的。作为documentation建议,只要当前事件的 ionic View 即将被销
我是一名优秀的程序员,十分优秀!