Question

我有两个单独的HTML模板用于添加/编辑用户，因此有两个独立的控制器。 如何为一个添加/编辑功能创建一个HTML文件和一个控制器。

添加用户

  <div>
       <label>FirstName</label>
                    <div>
         <input type="text" name="name"  data-ng-model="register.Student.FirstName">
                    </div>
                </div>
                <div>
                    <label>LastName</label>
                    <div>
         <input type="text" name="name" data-ng-model="register.Student.LastName">
                    </div>
</div>

修改用户

  <div>
                    <label>FirstName</label>
                    <div>
        <input type="text" name="name" data-ng-model="student.Student.FirstName">
                    </div>
                </div>
                <div>
                    <label>LastName</label>
                    <div>
         <input type="text" name="name" data-ng-model="student.Student.LastName">
                    </div>
</div>

AddController ，它将FirstName和Last Name初始化为null值。在我的EditController中不是这种情况。

       $scope.register = {
                User: {
                    FirstName: '',
LastName: '',
            };

我的路线配置

 templateUrl: '/app/users/newStudent.html',
        controller: 'newStudentController',
        controllerUrl: '/app/users/newStudentController.js', 

       templateUrl: '/app/users/editStudent.html',
        controller: 'editStudentController',
        controllerUrl: '/app/users/editStudentController.js',

Answer 1

分享html个文件，并将其命名为student.html并同时加入controller个文件，并将其命名为student.js。

<强> student.js

app.module('myApp', []).controller('studentController', function () {})

您的路线配置：

templateUrl: '/app/users/student.html',
        controller: 'studentController',
        controllerUrl: '/app/users/student.js',

更新

DEMO：http://jsfiddle.net/softvar/uh17tseh/1/

<强> HTML ：

<div ng-app="myApp" ng-controller="myController">
    <div ng-repeat="stud in students">
        <div ng-hide="isEditForm">
            <span>{{stud.name}} - {{stud.age}}</span>
            <button ng-click="isEditForm=true;">Edit Student</button>
        </div>
        <div ng-show="isEditForm">
            <label>Enter Name</label><input ng-model="stud.name" />
            <label>Enter Age</label><input ng-model="stud.age" />
            <button ng-click="isEditForm=false;">Save</button>
        </div>
    </div>
    <br/><br/>

    <div ng-hide="isAddForm">
        <button ng-click="isAddForm=true;">Add Student</button>
    </div>
    <div ng-show="isAddForm">
        <label>Enter name</label><input ng-model="newStudent.name" />
        <label>Enter Age</label><input ng-model="newStudent.age" />
        <button ng-click="addStudent()">Add</button>
        <button ng-click="isAddForm=false;">Cancel</button>
    </div>
</div>

<强> JS ：

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.students = [
        {"name": "ABC", "age": 21},
        {"name": "DEF", "age": 22},
        {"name": "GHI", "age": 23},
        {"name": "XYZ", "age": 24}
    ];
    $scope.newStudent = {};
    $scope.addStudent = function () {
        if ($scope.newStudent.name && $scope.newStudent.age) {
            $scope.students.push({"name": $scope.newStudent.name,"age": $scope.newStudent.age});
            $scope.isAddForm = false;
        }
    };
});

如何在AngularJs中重用HTML / Controller来添加/编辑用户

1 个答案:

更新