AngularJS 单独文件中的控制器未标识范围

Question

我正在学习 AngularJS 到目前为止，我已经有了一个框架应用程序的开始，它有一个主索引页面和两个模板：一个登录页面和一个主页，它们具有非常简单的控制器。我还没有深入到骨架中，所以我试图完成比说身份验证更基本的事情。

我之所以用这种方式编码是为了尝试应用我在学习时读到的概念 AngularJS；这是通过在自己的 JS 文件中为每个模板（或部分模板）提供自己的控制器来模块化您的代码。我相信这是我应该尽早应用的最佳实践，因为它可能会在未来发展很多。这就是为什么我不将我的控制器放在一个文件中的原因，我知道它工作得很好。

废话不多说，请看下面的代码，作为我目前所处位置的参考：

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyApp</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div ng-view>
        <!-- loaded view here -->
    </div>

    <!-- JS imports -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>

app.js

angular.module('MyApp', [
    'ngRoute'
])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/login", {
        templateUrl: 'assets/partials/login.html',
        controller: 'LoginCtrl'
    })
    .when("/home", {
        templateUrl: 'assets/partials/home.html',
        controller: 'HomeCtrl'
    })
    .otherwise({ 
        redirectTo: '/login'
    }); 
}]);

login.html, home.html

<div class="container-fluid text-center">
    <h2>{{pageTitle}}</h2>
</div>

login.js

angular.module('MyApp')

.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

home.js

angular.module('MyApp')

.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

那么我正在解决的问题是什么？ {{pageTitle}} 是加载视图时显示的内容，而不是通过范围传入的实际值。请让我知道这里出了什么问题，我愿意接受有关如何改进我的代码的所有建议，非常感谢所有帮助！

Answer 1

您需要在 app.js

之后的 html 中包含 home.js 和 login.js 控制器

<script src="assets/js/app.js"></script>
<script src="assets/js/home.js"></script>
<script src="assets/js/login.js"></script>

您还可以创建一个文件名 controller.js 并将所有控制器添加到其中以用于简单项目，这样您就不必从 html 对 js 文件发出新请求。

Answer 2

您没有将 login.js 和 home.js 包含到 index.html 文件中。此外，您不需要在所有文件中包含 angular.module('MyApp')。它已经存在于 app.js 中，同样的实例也可以在这里使用。

你可以做到

MyApp.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

MyApp.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

AngularJS 单独文件中的控制器未标识范围

AngularJS controllers in separate files not identifying the scope

angularjs

angularjs-scope

angularjs-routing

angularjs-controller