Question

我通过尝试制作一个简单的应用程序来自学AngularJS。使用控制器时，我在数据绑定方面遇到麻烦。

todo-item.js

'use strict';

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

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/todoItem', {
    templateUrl: 'todo-item/todo-item.template.html',
    controller: 'TodoItemCtrl'
  });
}])

.controller('TodoItemCtrl', [function() {
  this.test = [1, 2, 3, 4];
}]);

todo-item.template.html

<p>This is the partial for todo item.</p>
<p>
  this is just a test
</p>

<p>{{$ctrl.test}}</p>
<ul>
  <li ng-repeat="i in $ctrl.test">{{i}}</li>
</ul>

我看到的是网页显示：

这是部分待办事项。

这只是测试

所以这表明模板正在渲染，但是没有依赖数据绑定的部分...

如果我在console.log(this.test)行之后的控制器代码中放入this.test = [1, 2, 3, 4]，它将把数组对象打印到控制台Array(4) [ 1, 2, 3, 4 ]。所以我知道控制器代码必须正在运行...

我想念什么？

我还是AngularJS的新手，我还不熟悉该框架中的调试。您通常如何调试这样的东西？我可以转到控制台并执行类似>>$ctrl的操作吗？

如果有帮助，请访问app.js

'use strict';

// Declare app level module which depends on views, and core components
angular.module('todoApp', [
  'ngRoute',
  'todoList',
  'todoItem'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise({redirectTo: '/todoList'});
}]);

和index.html：

<!DOCTYPE html>

<html lang="en" ng-app="todoApp">
<head>
  <meta charset="utf-8">
  <title>ToDo AngularJS App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="app.css">
</head>
<body>

  <div ng-view></div>

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="todo-list/todo-list.js"></script>
  <script src="todo-item/todo-item.js"></script>
</body>
</html>

Answer 1

我认为您可能需要在路由提供者中提供controllerAs：'$ ctrl'，所以

$routeProvider.when('/todoItem', {
  templateUrl: 'todo-item/todo-item.template.html',
  controller: 'TodoItemCtrl',
  controllerAs: '$ctrl'
});

Answer 2

执行此操作的一种方法是使用代码：

.controller('TodoItemCtrl', ['$scope', function($scope) {
  $scope.test = [1, 2, 3, 4];
}]);

并将模板更新为：

<p>{{test}}</p>
<ul>
  <li ng-repeat="i in test">{{i}}</li>
</ul>

最好将$scope与控制器结合使用，如此处所述： this vs $scope

Answer 3

要回答这个问题，同时避免使用$scope，而是使用AngularJS文档建议的更孤立的方法，components是解决之道。

为此，我将app.js更改为处理routes，并严格使用components：

'use strict';

// Declare app level module which depends on views, and core components
angular.module('todoApp', [
  'ngRoute',
  'todoList',
  'todoItem'
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider.
  when('/todoList', {
    template: '<todo-list></todo-list>'
  })
  .when('/todoItem', {
    template: '<todo-item></todo-item>'
  })
  .otherwise({redirectTo: '/todoList'});
}]);

然后我在todo-item.js中实现了component：

'use strict';

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

.component('todoItem', {
    templateUrl: 'todo-item/todo-item.template.html',
    controller: 'TodoItemCtrl'
})

.controller('TodoItemCtrl', [function() {
  this.test = [1, 2, 3, 4];
}]);

要使用$scope，请参见Anurag Srivastava answer。我不确定什么是最好的方法，因为我有很多东西要学。

AngularJS控制器数据绑定{{$ ctrl.test}}不起作用

3 个答案: