Ionic/Angularjs 知識點解析

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'
        }
    }

跳轉

1. 使用js跳轉 $state.go('app.myapp-home')
2. 在UI裏使用href屬性：href="#/myapp/home"
3. 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';