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是一个定义为处理身份验证的角度服务，它不会将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模块，的 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>

角度控制器不绑定到视图

2 个答案: