AngularJS表单未加载

AngularJS form not loading

本文关键字：加载 表单 AngularJS      更新时间：2023-09-26

我正在研究Angular表单。我创建了Index.html和efTemplate.html文件。 efTemplate.html是我试图进入Index.html的表单页面。我有Index.html页面，其中包含所需的脚本语言的所有参考。当我执行Index.html时，我仍然得到空白页。请指教。

代码

索引.html

<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
</head>
<body ng-controller="efController" class="container">
   <employee-form />
</body>
</html>

代码

AngularFormsApp.js

var angularFormsApp = angular.module('angularFormsApp', []);

代码

efController.js

angularFormsApp.controller('efController',
function efController($scope, efService) {
    $scope.employee = efService.employee;
});

代码

efService.js

angularFormsApp.factory('efService',
function () {
    return {
        employee:{
            fullName: "Ashok Karale",
            Notes: "The Ideal employee. Just don't bother him",
            department: "Admin",
            perkCar: true,
            PerkStock: false,
            perkSixWeeks:true,
            PayrollType:"none"
        }
    }
});

代码

ef指令.js

angularFormsApp.directive('employeeForm',
function () {
    return {
        restrict: 'E',
        templateUrl: 'app/EmployeeForms/efTemplate.html'
    }
});

和代码

ef模板.html

<form role="form">
<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" class="form-control" />
</div>
<div class="form-group">
    <label for="notes">Notes</label>
    <textarea name="notes" id="notes" class="form-control" rows="5">   </textarea>
</div>
<div class=" form-group">
    <label for=" department">Department</label>
    <select name="department" id="department" class="form-control">
        <option>Engineering</option>
        <option>Finance</option>
        <option>Admin</option>
    </select>
</div>
<br />
<span><b>Perks</b></span><br />
<div class="checkbox">
    <label><input type="checkbox" value="perkCar"/>PerkCar</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="perkStock" />PerkStock</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="perSixWeek" />Perk SixWeek</label>
</div>
<div class="radio">
    <label><input type="radio" name="payrollType" value="w2" />W-2</label>
</div>
<div class="radio">
    <label><input type="radio" name="payrollType" value="ten99" />W-2</label>
</div>
<div class="radio">
    <label><input type="radio" name="payrollType" value="none" />W-2</label>
</div>
<br />
<input type="submit"class="btn btn-primary" value="Submit" />
</form>

我认为放置指令标签的正确方法是： 

<employee-form></employee-form>

https://docs.angularjs.org/guide/directive

相关文章：