Ionic/Angularjs 知识点解析
angular-ui-router(状态跳转)
state的定义:(在app.js的config下配置)
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app/menu.html',
controller: 'AppCtrl'
})
//state 跳转使用该参数名
.state('app.myapp-home', {
//使用href跳转使用该参数 格式为: ( #该参数 )
url: "/myapp/home",
views: {
'menuContent': {
templateUrl: "app/myapp/myapp-home.html",
controller: 'myappHomeCtrl'
}
}
跳转
- 使用js跳转
$state.go('app.myapp-home')
- 在UI里使用href属性:
href="#/myapp/home"
- state 跟url使用同一个标识,可以减少使用时的混乱
事件阻断
ng-click="questionValueClick(item,$event)"
$scope.questionValueClick = function(item,$event){
$event.stopPropagation();
//do something
}
$rootScope (全局变量缓存)
$rootScope.currentDate = new Date();
{{$root.currentDate}}
ng-repeat (重复绘制内容)
controller的配置
angular.module('app.controllers')
.controller('ExpectCtrl', ['$scope','ExpectService',function($scope,ExpectService) {
//定义好需要用的数据
$scope.data = {};
$scope.data.repectData = ExpectService.getExpectData();
}]);
UI的使用
<div class="list">
<!--使用ng-repeat,定义一个变量 使用in 语句 遍历目标数据列,改标签为循环体,里面的视图将会循环显示-->
<div ng-repeat="expectItem in data.repectData">
<!--使用{{ }}引用循环中的数据-->
<div class="item item-divider">
<span class="expect-label">目标:</span> <span>{{expectItem.title}}</span>
</div>
<a class="item" href="#">
<span class="expect-label">描述:</span> <span>{{expectItem.desc}}</span>
</a>
</div>
</div>
$q (用于返回promise格式的数据)
//定义
function makePromise (){
获取一个deferred
var deferred = $q.defer();
var result = {name:'test'};
//返回一个成功结果
deferred.resolve(result);
//返回一个失败结果
//deferred.reject(result);
return deferred.promise;
}
//调用
makePromise()
//resolve会跳到这里
.then(function(result){
//result 为 {name:'test'}
//do something
})
//reject会跳到这里
.catch(function(result){
//do something
})
localStorage 的使用(本地缓存)
不能保存复杂的对象,所以保存对象要转为json格式
//插入数据
var userMap ={name:'Saber'};
localStorage.setItem('userMap', JSON.stringify(userMap));
//获取数据
var result = JSON.parse(localStorage.getItem('userMap'))
ng-if,ng-show,ng-hide
区别
- ng-if 会直接把元素从dom里面移除
- ng-show,ng-hide 则只是隐藏
- ng-if 相比 ng-show 的性能方面会有很大的优化,当值为 false 的时候,ng-if 内所有绑定都不会执行,而ng-show 内依然会去重新渲染 ng-bind/ng-model。
使用
<a ng-if = "isShowDelete" class="tab-item">
<i class="icon ion-gear-a" ng-click ="showDelete()"></i>删除
</a>
<a ng-show = "isShowDelete" class="tab-item">
<i class="icon ion-gear-a" ng-click ="showDelete()"></i>删除
</a>
<a ng-hide = "isShowDelete" class="tab-item">
<i class="icon ion-gear-a" ng-click ="showDelete()"></i>删除
</a>
ng-class(动态加载 class )
注意有最外面要有{}
<button class="button button-icon button-clear "
ng-class="{'ion-android-arrow-dropdown':data.tplType =='PIC','ion-plus-round':data.tplType =='NOTE'}">
</button>
ng-model(双向绑定 使UI即时刷新)
注意model不要使用简单类型,否则会出现断层(用data封装一下)
<textarea placeholder="Note" class="common-text" ng-model="data.newNote.desc"></textarea>
ng-include(实现界面局部切换)
<div ng-include="template"></div>
//ng-include:的属性应该为template的url,其根目录为 www
$scope.template = 'app/myapp/temp/temp-product-detail.html';