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);
    };
  }
})();

在angularjs材料中添加装载程序？

1 个答案: