javascript - Angularjs 无法输入 Controller

标签 javascript angularjs html mvvm

我似乎在 Angularjs 使用“NgRoute”导航到页面时遇到问题。我还有另外 3 个带有 Controller 的页面,它们工作得非常好,但是当尝试进入仪表板页面时,它只加载 View 而不加载 Controller 。

AngularJS 应用

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

app.config(function ($routeProvider) {

    $routeProvider.when("/dashboard", {
        contoller: "dashboardController",
        templateUrl: "/app/views/dashboard.html",
    })

    $routeProvider.when("/machines", {
        controller: "machineController",
        templateUrl: "/app/views/machines.html",
    })

    $routeProvider.when("/departments", {
        controller: "departmentController",
        templateUrl: "/app/views/departments.html",
    })

    $routeProvider.when("/users", {
        controller: "userController",
        templateUrl: "/app/views/users.html",
    });

    $routeProvider.otherwise({ redirectTo: "/dashboard" });
});

Controller

'use strict';
app.controller('dashboardController', ['$scope', '$http', 'Page', function ($scope, $http, Page) {
    Page.setTitle('Dashboard');

}]);

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
        <!-- Angular Js -->
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>

        <!-- Application -->
        <script src="app/app.js"></script>

        <!-- Controllers -->
        <script src="app/controllers/pageController.js"></script>
        <script src="app/controllers/dashboardController.js"></script>
        <script src="app/controllers/departmentController.js"></script>
        <script src="app/controllers/machineController.js"></script>
        <script src="app/controllers/userController.js"></script>
</head>

当我调试 Controller 时,它没有通过第二行 Controller 的实例化。大家有什么想法吗?

最佳答案

您的配置中的 Controller 拼写错误。此外,正如 Nidhish 指出的,您可以链接您的配置,因为 when 调用再次返回路由提供程序。

所以你的(固定)代码是

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

app.config(function ($routeProvider) {

    $routeProvider.when("/dashboard", {
        // you have missed an r in controller here
        controller: "dashboardController",
        templateUrl: "/app/views/dashboard.html",
    })

    $routeProvider.when("/machines", {
        controller: "machineController",
        templateUrl: "/app/views/machines.html",
    })

    $routeProvider.when("/departments", {
        controller: "departmentController",
        templateUrl: "/app/views/departments.html",
    })

    $routeProvider.when("/users", {
        controller: "userController",
        templateUrl: "/app/views/users.html",
    });

    $routeProvider.otherwise({ redirectTo: "/dashboard" });
});

并且可以重写为

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

app.config(function ($routeProvider) {
    $routeProvider
      .when("/dashboard", { controller: "dashboardController", templateUrl: "/app/views/dashboard.html" })
      .when("/machines", { controller: "machineController", templateUrl: "/app/views/machines.html" })
      .when("/departments", { controller: "departmentController", templateUrl: "/app/views/departments.html" })
      .when("/users", { controller: "userController", templateUrl: "/app/views/users.html" })
      .otherwise({ redirectTo: "/dashboard" });
});

当然这只是个人喜好,效果是一样的

关于javascript - Angularjs 无法输入 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29607472/

相关文章:

javascript - 在调整窗口大小之前,响应式 Highcharts 无法正确调整大小

附加 html 后的 Javascript 函数

javascript - 为什么 AngularJS Controller 作用域不像常规 javascript 作用域那样工作?

javascript - 使用 ui-router AngularJS 1.x 获取给定 url 的状态

javascript - 每次操作后刷新表

javascript - 在部分/粘性侧边栏上滚动时添加/删除类

javascript - 向数组添加新元素

javascript - 使用 javascript 设置 Coldfusion 变量以便在同一页面上的 Replace() 中使用?

javascript - React-DatePicker 使用先前选择的日期更新状态

javascript - 需要时jquery更新功能