如何在 AngularJS MD 中使用 <md-progress-linear>？答案

【问题标题】：How to use <md-progress-linear> in AngularJS MD?如何在 AngularJS MD 中使用 <md-progress-linear>？
【发布时间】：2015-11-02 11:10:03
【问题描述】：

我在我的 AngularJS 应用程序中使用Material Design，我想在我的页面加载时添加一个进度条。

MD 使用md-progress-* 指令获取加载条：

<md-progress-linear md-mode="determinate" value="..."></md-progress-linear>

在我的应用中，我尝试在 $viewContentLoaded 上完成加载进度：

HTML：

<html ng-app="app">
    <body ng-controller="AppCtrl">
        <md-progress-circular ng-if="determinateValue === 100" md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
        ...
    </body>
</html>

JS：

'use strict';
angular.module('app', ['ngMaterial', 'ngAnimate'])
.controller('AppCtrl', function ($scope) {
    $scope.determinateValue = 0;
    $scope.$on('$viewContentLoaded', function(){
        $scope.determinateValue = 100;
    });
});

但它不起作用，我没有收到任何错误。

ps。 <md-progress-linear> 标签从 DOM 中消失了。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

首先，使用md-mode="indeterminate"，因为您的加载是二进制的并且只有两种状态。摆脱ng-if 并使用绑定到$scope.determinateValue 的value 属性。所以：

        <md-progress-circular md-mode="indeterminate" value="determinateValue"></md-progress-circular>

我会将determinateValue 重命名为更精确和更具反射性的名称。标签也消失了，因为determinateValue总是在某个时候被分配给100，即你的内容正在加载

【讨论】：