Question

我使用角度1来将数据从表单绑定到下一视图，并使用路由模块显示不同文件的html结构，我将所有html代码都放在一个文件中，原型可以完美地工作，但是当我使用路由模块，数据未通过链接进行绑定，

在以下链接中，即时消息仅使用css进行转换，因此所有html都在一个文件中，而不使用路由模块，因此它可以正常工作http://jspmultimedia.com/angular-cv-css/#form

，在下一个链接中，使用路由模块的地方不起作用传递表单中的数据以在下一个视图中显示。 http://jspmultimedia.com/angular-cv-route/#!/form

var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        controller : 'myCtrl',
        templateUrl : 'dashboard.htm'
    })
    .when("/form", {
        controller : 'myCtrl',
        templateUrl : 'form.htm'    
    })
    .when("/result", {
        controller : 'myCtrl',
        templateUrl : 'resultdashboard.htm'
    })                      
    .otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
    $scope.position = [
        "Front-end Web Developer",
        "Back-end Web Developer",
        "UI / UE Designer"
    ]
    //add skills
    $scope.skills = [];
    $scope.addItem = function () {
        $scope.skills.push($scope.addMe);
    }
    //remove skills
    $scope.removeItem = function (x) {
        $scope.skills.splice(x, 1);
    }  
});

这是表格。htm

<!-- FORM -->
<form id="form">
    <div class="form-group row"><!-- Name -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
        <div class="col-10">
            <input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
        </div>
     </div>
    <div class="form-group row"><!-- Last Name -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
        <div class="col-10">
            <input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
        </div>
     </div>              

     <div class="form-group row"><!-- Short Description -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
        <div class="col-10">
            <textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
      </div>                  
    </div>

    <div class="form-group row"><!--  select Position to apply -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
        <div class="col-10">
            <select ng-model="selectedPosition"  class="form-control form-control-lg">
                <option value="" selected disabled hidden>Choose here</option>
                <option ng-repeat="x in position" value="{{x}}">{{x}}</option>
            </select>
        </div>
    </div>
    <div class="form-group row"><!--  add skills -->
        <label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
        <div class="col-4">
            <ul>
                 <li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
                        <span ng-click="removeItem($index)" style="cursor:pointer;">&times;</span>
                    </div>
                </li>

            </ul>
            <input class="form-control" ng-model="addMe">
            <button ng-click="addItem()" class="btn btn-primary">Add</button>                           
        </div>
        <div class="clearfix">
        </div>
        <div class="image-upload"> <!-- Image Upload preview -->
            <input type="file" class="form-control-file" onchange="readURL(this);" />
            <img id="preview-img" src="http://placehold.it/180" alt="your image" />
        </div>
    </div>  
    <!-- FINISH CTA-->
    <a href="#!result"class="btn btn-primary btn-lg text-center m-auto text-white">Finish</a>
</form>

最后是resultdashboard.htm

<!-- Result dashboard CV -->
    <div id="resultDashboard">
    <div class="row col-12">
        <div class="col-3">
            <img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
        </div>
        <div class="col-6">
            <h1>{{ name + " " +lastName}}</h1>
            <p>{{shortDescription}}</p>
            <div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
        </div>
        <div class="col-3">
            <h3>Main Skills</h3>
            <ul>
                <li ng-repeat="x in skills"> {{x}}
                </li> 
            </ul>
        </div>
    </div>
</div>

我假设如果任何人都可以快速浏览一下，我必定会丢失控制器的某些东西，请，我真的很感激，该原型假设是CV上传的，只是为了学习如何使用Angle 1，然后继续与其他库一起，我认为了解路由对我来说是重要的一步。反正谢谢你。

Answer 1

在HTML中添加控制器-如ng-controller =“ myCtrl”

角度1简单路由-数据绑定不起作用

1 个答案: