Angular 控制器未绑定到视图

Question

我有一个 Angular 控制器定义了类似

mainCtrl.js

angular.module("mainCtrl", [])

.controller("mainController", function ($rootScope, $location, Auth) {

    var vm = this;
    vm.testStr = "If you see this, mainController is active on your page";
    .
    .
    .

此处 Auth 是定义为处理身份验证的 angular 服务，它不会将 testStr 变量置于身份验证之后。

定义的视图试图将变量 testStr 绑定为如下所示

index.html

<html>
<head>
<base href="/">

<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>

</head>
<body ng-app="userApp" ng-controller="mainController as main">

<main class="container">
   <!-- ANGULAR VIEWS -->
   <div><h3>{{main.testStr}}</h3></div>
   <div ng-view></div>
</main>

</body>
</html>

但是当加载索引时，testString 的值不会出现在页面上。相反 {{main.testStr}} 出现。

我假设它不是必须使用 $scope 并且找不到我做错了什么。

在此先感谢您的帮助。

编辑

还有其他文件我没有在这里提到。现在我可以看到它们的相关性了。

应用模块， app.js

angular.module("userApp", ["ngAnimate", "app.routes",
    "authService", "mainCtrl",
    "employeeCtrl", "employeeService"])

// application configuration to integrate token into requests
.config(function ($httpProvider) {

    // attach our auth interceptor to the http requests
    $httpProvider.interceptors.push("AuthInterceptor");

});

路由模块 app.route.js

angular.module("app.routes", ["ngRoute"])

.config(function ($routeProvider, $locationProvider) {

    $routeProvider

    // route for the home page
        .when("/", {
            templateUrl: "app/views/pages/home.html"
        })

        // login page
        .when("/login", {
            templateUrl: "app/views/pages/login.html",
            controller: "mainController",
            controllerAs: "login"
        })

        // show all employees
        .when("/employees", {
            templateUrl: "app/views/pages/employees/all.html",
            controller: "employeeController",
            controllerAs: "employee"
        })

        // form to create a new user
        // same view as edit page
        .when("/employees/create", {
            templateUrl: "app/views/pages/employees/single.html",
            controller: "employeeCreateController",
            controllerAs: "employee"
        })

        // page to edit a user
        .when("/employees/:employee_id", {
            templateUrl: "app/views/pages/employees/single.html",
            controller: "employeeEditController",
            controllerAs: "employee"
        });

    $locationProvider.html5Mode(true);

});

Answer 1

您已将模块名称声明为 mainCtrl

angular.module("mainCtrl", [])

但将 ng-app 用作 userApp

像这样更改您的模块，

angular.module("userApp", [])

Answer 2

你的模块名称有误。它应该是 userApp 而不是 mainCtrl。请参阅下面的工作示例：

var myApp = angular.module("userApp", []);

myApp.controller("mainController", function($scope) {
  var vm = this;
  vm.testStr = "Hello";
});

<html>

<head>
  <base href="/">

  <!-- load angular and angular-route via CDN -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>

</head>

<body ng-app="userApp" ng-controller="mainController as main">

  <main class="container">
    <!-- ANGULAR VIEWS -->
    <div>
      <h3>{{main.testStr}}</h3>
    </div>
    <div ng-view></div>
  </main>

</body>

</html>

Angular 控制器未绑定到视图

Angular controller not binding to view

angularjs

angular-controller