ionic项目中问题杂记

1.ionic中模态窗口($ionicModal)和弹出窗口($ionicPopup)同用时。

存在的问题:点击弹出窗口的遮罩处(即为弹出窗口后面的灰黑色背景),会关闭模态窗口

解决的办法:

$ionicModal.fromTemplateUrl("my-modal.html", {
					scope: $scope,
					animation: "slide-in-up",
					backdropClickToClose : false
				}).then(function(modal) {
					$scope.modal = modal;
				});

如上的红色字,在该处加入属性backdropClickToClose=false.


2.rule()

如果想越过任何URL的匹配或者在其他路由前做路由修改,则可以使用rule()函数。在使用它的时候必须返回一个合法的代表路径的字符串。

app.config(function($urlRouterProvider){ $urlRouterProvider.rule( function($injector, $location) { return '/index'; }); })

3. onEnter,onExit 回调函数

当应用进入或者离开当前状态的视图时会调用这两个函数。这两个函数可以访问预载入的数据。这两个回调函数使开发者可以根据状态改变来采取某些动作,例如在用户要离开时可以弹出对话框‘你确定吗?’以及防止意外操作等。

实际应用:

angular.module('myApp', ['ionic'])

.config(function($stateProvider) {
    $stateProvider
        .state('index', {
            url: '/',
            templateUrl: 'index.html'
        })
        .state('destination', {
            url: '/destination',
            templateUrl: 'partials/destination.html'
        }, 
	    onEnter: function() {
	    console.log("Where in the onEnter callback")
        })           
        .state('summary', {
            url: '/summary',
            templateUrl: 'partials/summary.html'
        });
});

4.字符串模板的使用($interpolate

4.1 普通模板使用

<pre name="code" class="javascript">angular.module('myApp', []).controller('myCtrl', function($scope, $interpolate){
var date = {name:'张三', age:20};
var date1 = {name:'李四', age:21};
var temp = $interpolate('测试模板一,用户姓名:{{name}},年龄:{{age}}');
console.log(temp(date));
console.log(temp(date1));
});


 最后的结果为: 

测试模板一,用户:张三,年龄:20

测试模板一,用户:李四,年龄:21

还可以对于动态参数使用过滤器,例如为名字加上过滤器{{name | 过滤器名称}}

4.2 .字符串模板配置

<pre name="code" class="javascript">angular.module('myApp',[]).config('$interpolateProvide', function($interpolateProvide){ 
$interpolateProvide.startSymbol('~~');
$interpolateProvide.endSymbol('~~');
}).factory('mySve',['$interpolate', function($interpolate){
return {
parse:function(text,paramObj){
var temp =$interpolate(text);
return temp(paramObj);
}
};
}]);


 

使用:引入mySve服务后,调用mySve.parse('测试一:姓名~~name~~,年龄~~age~~', {name:'张三', age:20});

结果:测试一:姓名张三,年龄20.








注:以上有些问题为群中见到,以作记录。另欢迎大家一起来讨论,完善

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值