Question

我开始学习Angular并试图重复＆＃34;待办事项列表＆＃34;他们在主页上的任务。但是，我一开始就陷入困境：

模板

<div ng-app>
  <div ng-controller="TodoCtrl">
    <h2>{{totalItems}}</h2>
  </div>
</div>

的Javascript

function TodoCtrl($scope) {
  $scope.totalItems = 4;
}

我似乎做了同样的事情，但是它不起作用。怎么了？

Answer 1

首先，您必须导入angular库，然后实例化app，最后以这种方式创建控制器：

angular.module('app', [])
  .controller('TodoCtrl', function($scope) {
    $scope.totalItems = 4;
  });

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="TodoCtrl">
  <div>
    <h2>{{totalItems}}</h2>
  </div>
</body>

</html>

我建议你检查一下：What is a Module?

Answer 2

http://codepen.io/anon/pen/EywXXQ这是代码工作的代码集的分支。

您需要导入角度脚本
需要像这样创建角色应用
使用ng-app

使用ng-controller

创建一个控制器并将其注入html

 angular.module('app', []).controller('TodoCtrl',
  function ($scope) {
   $scope.totalItems = 4;
 });

阅读这些有助于您更好地理解的教程

Tutorial

Angular $ scope值不会显示在页面

2 个答案: