时间戳

首页 > 解决方案 > AngularJS 控制器数据绑定 {{$ctrl.test}} 不工作

angularjs - AngularJS 控制器数据绑定 {{$ctrl.test}} 不工作

问题描述

我通过尝试制作一个简单的应用程序来自学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)在该行之后的控制器代码中添加了 a 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>

标签： angularjsdata-binding

解决方案

我认为您可能需要在您的路由提供程序中提供 controllerAs: '$ctrl' ，所以

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

推荐阅读