将控制器链接到路由的 Angular Js 不起作用答案

【问题标题】：Angular Js linking a controller to a route doesn' work将控制器链接到路由的 Angular Js 不起作用
【发布时间】：2017-02-02 09:46:06
【问题描述】：

我在 codeschool 上观看 Angular 课程，它说有两种方法可以将控制器链接到路由第一个是在路由中声明控制器，如下所示：

angular.module('NotesApp')
    .config(function($routeProvider){
        $routeProvider.when('/notes', {
            templateUrl:' templates/pages/notes/index.html',
            controller: function(){.....}           
        })

第二种方法是创建一个新文件，然后在那里声明与该控制器关联的所有方法。完成此操作后，我们必须将控制器与路由相关联，如下所示。

angular.module('NotesApp')
    .config(function($routeProvider){
        $routeProvider.when('/notes', {
            templateUrl:' templates/pages/notes/index.html',
            controller:'NotesIndexController', 
            controllerAs:'indexController'          
        })

我制作的这个控制器使用 ajax 调用从 json 文件导入了一些数据，但效果不佳。我必须在 HTML 文件中使用这个控制器

这是控制器

angular.module('NotesApp').controller('NotesIndexController',['$http', function($http){
    var controller = this;

    controller.notes = [];

    $http.get('notes.json').success(function(data){                     
        controller.notes = data;
    })
}]);

这是 HTML 代码

<a ng-repeat="note in indexController.notes" ng-href="#/notes/{{note.id}}">
                <div class="col-md-3 fixHeight" >
                    <h4>Id: {{note.id}}<h4>
                    <h4>Title: {{note.title}}</h4>
                    <h4>Description: {{note.description}}</h4>
                </div>
            </a>
        </div>

html 应该导入存储在 controller.notes 数组中的所有注释并显示所有内容，但似乎 html 无法识别控制器并且不导入任何内容。

只要我在 HTMl 中声明我必须像这样使用的控制器，代码就可以工作：

<div ng-controller="NotesIndexController as indexController">       
            <a ng-repeat="note in indexController.notes" ng-href="#/notes/{{note.id}}">
                <div class="col-md-3 fixHeight" >
                    <h4>Id: {{note.id}}<h4>
                    <h4>Title: {{note.title}}</h4>
                    <h4>Description: {{note.description}}</h4>
                </div>
            </a>
        </div>

我的问题是。如果我在路由中声明控制器，为什么还要在 HTML 中声明它？

【问题讨论】：

您实际上不需要在 html 中声明它。能否请您提供 jsfiddle 或 plnkr 以便它有助于调试问题
检查这个 plnkr 看看你是否犯了任何错误。 plnkr.co/edit/aFFU726uoD5i9Hq83x3N?p=preview
你好，我看到了你的代码，但我不明白我的错误在哪里。这是我的代码的 plnkr 链接。希望你能帮助我：plnkr.co/edit/QcxT3Ht1N81N3T69rgiz?p=preview
您的 plnkr 实现有两点错误，将模板 url 更改为“notes.html”，将 GET url 更改为“notes.json”

标签： javascript angularjs controller routes

【解决方案1】：

好的，谢谢大家，我找到了问题所在。这是完整的 route.js 文件

angular.module('NotesApp',["ngRoute"])
.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/notes', {
        templateUrl:'templates/pages/notes/index.html',
        controller:'NotesIndexController', // I have to declare the controller inside the template to make it work
        controllerAs:'indexController'          
    })  
    .when('/users',{
        templateUrl: 'templates/pages/users/index.html'
    })
    .when('/',{
        templateUrl: 'templates/pages/notes/index.html'
    })
    .when('/notes/:id', {
        templateUrl:'templates/pages/notes/show.html',
        controller:'NoteShowController',
        controllerAs:'showController'
    })
    .otherwise({redirectTo:'/'});
}]);

问题出在这条线：

    .when('/',{
    templateUrl: 'templates/pages/notes/index.html'
})

相反，加载我的控制器应该是

        .when('/',{
    redirectTo: '/notes'
})

【讨论】：

【解决方案2】：

请找到this 使用您的代码的工作人员

angular.module('NotesApp',  ["ngRoute"])
.config(function($routeProvider){
    $routeProvider.when('/', {
        templateUrl:'main.html',
        controller:'NotesIndexController', 
        controllerAs:'indexController'          
    })
})
angular.module('NotesApp').controller('NotesIndexController',['$http', function($http){
   var controller = this;

   controller.notes = [];

  $http.get('data.json').success(function(data){      
    console.log(data)
    controller.notes = data;
})

}]);

【讨论】：