在angularjs材質中添加裝載器？

Question

我正在使用Angular js材質。我想將裝載機集成到我的工作空間中。

這裏我的配置代碼：

(function() { 
'use strict'; 

var app = angular.module('app') 

    .config(function ($mdThemingProvider, $mdIconProvider , $httpProvider) { 

     $mdIconProvider 
      .defaultIconSet("./assets/svg/avatars.svg", 128) 
      .icon("menu", "./assets/svg/menu.svg", 24) 
      .icon("share", "./assets/svg/share.svg", 24) 
      .icon("google_plus", "./assets/svg/google_plus.svg", 512) 
      .icon("hangouts", "./assets/svg/hangouts.svg", 512) 
      .icon("twitter", "./assets/svg/twitter.svg", 512) 
      .icon("phone", "./assets/svg/phone.svg", 512); 

     $mdThemingProvider.theme('default') 
      .primaryPalette('cyan') 
      .accentPalette('yellow', { 
       'default': '100' // use shade 200 for default, and keep all other shades the same 
      }); 

    }) 
})(); 

誰能幫助我，我想進步線性

<md-progress-linear md-mode="indeterminate"></md-progress-linear> 

Answer 1

我建議加一個變量的作用域指示何時事情是裝載機整合加載，然後將ng-if添加到md-progress-linear。

這裏有一個簡單的例子：

http://codepen.io/robertmesserle/pen/f7b44235f58520316db95b0aae8f8afd/

HTML：

<div ng-controller="DemoCtrl as ctrl" ng-app="MyApp"> 
    <md-content class="md-padding"> 
    <h1 class="md-display-1">Progress Linear</h1> 
    <p>The progress bar will be displayed when you click the following button.</p> 
    <md-button class="md-raised md-primary" style="margin-left:0;" ng-click="ctrl.simulateLoading()">Simulate Loading</md-button> 
    <br /> 
    <br /> 
    <md-progress-linear ng-if="ctrl.loading" md-mode='indeterminate'></md-progress-linear> 
    </md-content> 
</div> 

JS：

(function() { 
    'use strict'; 
    angular 
     .module('MyApp') 
     .controller('DemoCtrl', DemoCtrl); 

    function DemoCtrl ($timeout, $q, $log) { 
    this.loading = false; 
    this.simulateLoading = function() { 
     this.loading = true; 
     $timeout(function() { 
     this.loading = false; 
     }.bind(this), 5000); 
    }; 
    } 
})();