Question

我正在学习AngularJS，我的控制器有问题。

下面这个例子已经有效了，但它突然停止了，没有任何可能导致这种情况的变化。我不确定有什么问题。

未加载/templates/index.html文件。

这是我的主要index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- ANGULAR JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/controllers/todolists.js"></script>

</head>
<body ng-app="app">

<div ui-view></div>

</body>
</html>

这是我的app.js：

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

    app.config(function ($stateProvider) {

    $stateProvider
        .state('/', {
            url: "/",
            templateUrl: "app/templates/index.html",
            controller: 'todolists',
        });
});

这是我的Todolists控制器：

var app = angular.module('app');
var controllers = {};

console.log("test");

controllers.todolists = function ($scope, $http) {

    console.log("test1");

    $http.get('http://localhost:8888/todolist/rest/entries/index.json').
        then(function(response) {

            console.log(response.data);
            $scope.data = response.data;
        });
};

app.controller(controllers);

console.log（“test”）写入控制台，但console.log（“test1”）没有，因此不访问控制器。

请查看并告诉我您是否有可能出错的提示。

谢谢，Grega

Answer 1

您需要为控制器注册名称是问题所在。我注册了名称'todolistCtrl'，这是控制器注册方法所需的第一个参数。第二个参数是函数controllers.todolists。

然后，您可以在State Provider中引用todolistCtrl。

<强>控制器

var controllers = {};

console.log("test");

controllers.todolists = function ($scope, $http) {

 $http.get('http://localhost:8888/todolist/rest/entries/index.json').
        then(function(response) {

            console.log(response.data);
            $scope.data = response.data;
        });

};

angular.module('app')
.controller('todolistCtrl', controllers.todolists);

应用

var app = angular.module('app', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('/', { url: "/", templateUrl: "index.html", controller: 'todolistCtrl', }); });

<强> Plunker Example

没有访问AngularJS控制器

1 个答案: