Question

我是角js和角材料的新手。我正在使用Web表单应用程序包含4个步骤（查看）我正在使用$ route provider在视图之间切换，但是在第一步中只显示内容以及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');
        }
    }
}]);

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

Answer 1

尝试使用 flex 指令

<md-content flex layout-padding>

以下是有关link

的信息

Answer 2

嗯，这真的合作吗？

请试试。我认为它的路线问题不是物质问题

Answer 3

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

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

});

某些角度材料内容未使用角度路径显示

3 个答案: