使用 angular-route 未显示某些角度材料内容答案

【问题标题】：some angular material content does not show using angular-route使用 angular-route 未显示某些角度材料内容
【发布时间】：2016-01-05 08:33:28
【问题描述】：

我是 Angular js 和 Angular 材料的新手。我正在开发包含 4 个步骤的 Web 表单应用程序（视图）我正在使用 $route 提供程序在视图之间切换但是在第一步中只显示外部内容，并且 md-content 中的所有内容都不会出现here is screenshot

my-step1.html

<div ng-controller="Step1Ctrl" layout="column" layout-align="center">
    <div layout-gt-sm="row" layout-align="center">
        <div class="banner">
            <p> <span class="step">STEP 1</span> List all household members who are infants, children, and students up to and including grade 12</p>
        </div>
    </div>
<md-content layout-padding>

    <form name="Form" class="wrap" novalidate>

        <div layout-gt-sm="row" layout-align="center" class="page md-inline-form" data-ng-repeat="child in childern">

            <md-input-container class="md-block ele ">
                <label>First Name</label>
                <input required name="firstName" ng-model="child.firstName">
                <div ng-messages="Form.firstName.$error">
                    <div ng-message="required">First Name is required.</div>
                </div>
            </md-input-container>

            <md-input-container class="md-block ele" style="max-width:60px;">
                <label>MI</label>
                <input required name=" middleName " ng-model="child.middleName ">
                <div ng-messages="Form.middleName.$error ">
                    <div ng-message="required ">Middle Name is required.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block ele ">
                <label>Last Name</label>
                <input required name="lastName " ng-model="child.lastName ">
                <div ng-messages="Form.lastName.$error ">
                    <div ng-message="required ">Last Name is required.</div>
                </div>
            </md-input-container>

            <div class="cell ">
                <label> <b>Student?</b></label>
                <div class="ele">
                    <md-radio-group ng-model="child.IsStudent">
                        <md-radio-button value="Yes">Yes</md-radio-button>
                        <md-radio-button value="No"> No </md-radio-button>
                    </md-radio-group>
                </div>
            </div>

            <div class="cell ">
                <label><b> Child's situation?(check all that apply) </b></label>
                <div>
                    <md-checkbox ng-model="child.IsFoster">
                        Foster Child
                    </md-checkbox>
                    <md-checkbox ng-model="child.IsHomless">
                        Homeless, Migrant, Runaway
                    </md-checkbox>

                </div>

            </div>

            <div id='rem' remove-me>
                <md-button class="md-raised md-primary remove" ng-if="childern.length != 1" ng-click="removeChild(childern,$index)">
            </div>
        </div>
    </form>
</md-content>
</div>

app.js

'use strict'
angular.module('myform', ['ngRoute', 'ngMaterial', 'ngAnimate', 'ngMessages', 'DataCollector'])

.controller('Step1Ctrl', ['formCache', "$location", function ($scope, formCache, $location) {
    var SkipStep4 = false;
    $scope.childern = [{}];
    // formCache.set($scope.childern.id, $scope.childern);
    $scope.addChild = function (index) {
        $scope.childern.push({
            'id': 'index+1'
        });
    };
    $scope.removeChild = function (array, index) {
        if ($scope.childern.length > 1) {
            array.splice(index, 1);
        }
    };
    $scope.checkNextStep = function () {
        for (var index = 0; index < $scope.childern.length; index++) {
            if ($scope.childern[index].IsFoster === true) {
                SkipStep4 = false;
            } else {
                SkipStep4 = false;
            }
        }
        if (SkipStep4 === true) {
            $location.path('/step4');
        }
    }
}]);

更新插件链接： http://plnkr.co/edit/jz4pbBh4E9HdmshQfu7e?p=preview

【问题讨论】：

你能创建plunker吗

标签： javascript angularjs html angularjs-routing angular-material

【解决方案1】：

尝试使用 flex 指令

<md-content flex layout-padding>

这是有关它的信息link

【讨论】：

【解决方案2】：

嗯，这真的有用吗？

请尝试。我认为这是路线问题而不是物质问题

【讨论】：

【解决方案3】：

我想通了，控制器抛出错误是因为我有方括号来注入独立性我认为在 1.4.8 版本中你只需要在函数中提及参数。所以我将控制器更改为

.controller ('Step1Ctrl',function ($scope, $location){
//code here 

});

【讨论】：