Question

我一般对AngularJS和JavaScript还是陌生的，所以任何帮助都将不胜感激！我有两个数据源“用户”和“宠物”-都是数组对象，我希望它们显示在站点不同页面的表中。我有一个app.module.js，它调用模块petsapp或usersapp。当前仅被调用的控制器是petspp。我曾尝试使用$ scope，但我真的不知道自己在做什么！

我目前已经设置了一个 app.module.js ，它看起来像这样（但可能是错误的：

(function(){
    'use strict';

    angular.module('petsapp',[]);
    angular.module('usersapp',[]);
})();    

another file called **Pets.controller.js:**

    (function () {
    'use strict';

    angular
        .module('petsapp')
        .controller('PetsController', function ($scope) {

        })


    PetsController.$inject = ['$http'];

    function PetsController($http) {
        var vm = this;

        vm.pets = [];
        vm.getAll = getAll();
        vm.deletePet = deletePet();

        init();

        function init(){
            getAll();
        }

和如下所示的 users.controller.js ：

(function () {
'use strict';
angular
    .module('usersapp')
    .controller('UsersController', UsersController)

UsersController.$inject = ['$http'];

function UsersController($http) {
    var vm = this;

    vm.users = [];
    vm.getAll = getAll()
    vm.delete = deleteUser()

    init();

    function init(){
        getAll();
    }

我的 peting html （有效）是：

    <!DOCTYPE html>
    <script type="text/javascript"src="/static/angular.min.js" th:src="@{/angular.min.js}"></script>
    <script type="text/javascript"src="/static/app/app.module.js" th:src="@{/app/app.module.js}"></script>
    <script type="text/javascript"src="/static/app/pets.controller.js" th:src="@{/app/pets.controller.js}"></script></head>
    <header th:insert="fragments.html :: nav"></header>
    <body ng-app="petsapp" ng-controller="PetsController as vm">
    <!-- Page content goes here -->
    <div>
        <div class="row">
        <div class="col-lg-offset-2 col-lg-8">
            <!-- Display animals in a table -->
            <table class="table">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Gender</th>
                    <th>Breed</th>
                    <th>Age</th>
                    <th>OK with Children?</th>
                    <th style="width: 100px"></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="pet in vm.pets">
                    <td>{{pet.id}}</td>
                    <td>{{pet.animalName}}</td>
                    <td>{{pet.animal}}</td>
                    <td>{{pet.gender}}</td>
                    <td>{{pet.breed}}</td>
                    <td>{{pet.age}}</td>
                    <td>{{pet.compWithChildren}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>.

我的用户html （不起作用，因为它只是拉pets.controllers.js）是：

    <head th:insert="fragments.html :: headerfiles">
    <script type="text/javascript"src="/static/angular.min.js" th:src="@{/angular.min.js}"></script>
    <script type="text/javascript"src="/static/app/app.module.js" th:src="@{/app/app.module.js}"></script>
    <script type="text/javascript"src="/static/app/users.controller.js" th:src="@{/app/users.controller.js}"></script>
    </head>
    <header th:insert="fragments.html :: nav"></header>
    <body ng-app="usersapp" ng-controller="UsersController as vm">
    <!-- Page content goes here -->
    <div>
    <div class="row">
        <div class="col-lg-offset-2 col-lg-8">
            <!-- Display animals in a table -->
            <table class="table">
                <thead>
                <tr>
                    <th>User Name</th>
                    <th>Roles</th>
                    <th>Email</th>
                    <th>Contact Number</th>
                    <th style="width: 100px"></th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="userdetail in vm.users">
                    <td>{{userdetail.username}}</td>
                    <td>{{userdetail.roles}}</td>
                    <td>{{userdetail.email}}</td>
                    <td>{{userdetail.contactNo}}</td>
                    <td>
                        <!--Only Admin can delete rows --->
                        <button class="btn btn-danger" ng-click="vm.deleteUser(userdetail.id)">Delete</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html

我认为问题出在我定义了两个模块的app.module.js文件中？

是否需要将两个控制器合并到一个文件中？如果是这样，我该如何实现？

AngularJS-不同页面上的多个模块/控制器-仅为两个页面选择第一个控制器

0 个答案: