Question

我从AngularJS开始，但无法获得所需的输出。这是代码。

index.html

<!doctype html>
<html ng-app>
<head>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/underscore-min.js"></script>
    <script type="text/javascript" src="scripts/todo.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
    <div ng-controller="TodoCtrl">
        <h2>Total todos: {{totalTodos}}</h2>
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                {{todo.text}}

            </li>
        </ul>
    </div>
</body>
</html>

todo.js

function TodoCtrl($Scope) {
    $Scope.totalTodos = 4;
    $scope.todos = [
        { text: 'Learn AngularJS', done: false },
        { text: 'Build an appp', done: false }
    ];
}

Answer 1

您需要为angular实现模块和控制器代码（基本示例链接http://codepen.io/larryjoelane/pen/VeQbrW）。您可以将以下代码放在todo.js文件中。我在代码中添加了一些注释，以显示我对您发布的代码所做的其他更改，以使其正常工作。

在下面的示例中，您会注意到我将ng-app属性放在div的oppening标记内。这是因为我无法访问代码笔中的html标记。你在html代码中尝试这样做的方式是正确的。你唯一缺少的是价值。

直播示例：http://codepen.io/larryjoelane/pen/WrMZxg

角度控制器代码：

angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
  //changed from $Scope.totalTodos = 4 (syntax error $Scope would be undefined)
  $scope.totalTodos = 4;

    $scope.todos = [
        { text: 'Learn AngularJS', done: false },
        { text: 'Build an appp', done: false }
    ];

}]);

您还需要为ng-app属性添加应用名称。

示例：<html ng-app="app">

完全更正的HTML：

<!doctype html>
<html ng-app="app">
<head>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/underscore-min.js"></script>
    <script type="text/javascript" src="scripts/todo.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
    <div ng-controller="TodoCtrl">
        <h2>Total todos: {{totalTodos}}</h2>
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                {{todo.text}}

            </li>
        </ul>
    </div>

</body>
</html>

使用ng-bind属性的附加HTML示例：

      <!--Example using ng-bind-->
      <h1>Example using ng-bind<h1>


    <h2>Total todos:<span ng-bind="totalTodos"></span></h2>

        <ul class="unstyled">
            <li ng-repeat="todo in todos" ng-bind="todo.text">


            </li>
        </ul>

Answer 2

更改此

$Scope

到此

$scope

您还需要

ng-app =“app”这是你的模块名称，我相信你还没有定义你的模块

<强>的index.html

<!doctype html>
<html ng-app="app">
<head>
    <script src="//code.angularjs.org/1.4.8/angular.js"></script>
    <script src="scripts/underscore-min.js"></script>
    <script type="text/javascript" src="scripts/todo.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
    <div ng-controller="TodoCtrl">
        <h2>Total todos: {{totalTodos}}</h2>
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                {{todo.text}}

            </li>
        </ul>
    </div>

</body>
</html>

<强> todo.js

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

    $scope.todos = [
        { text: 'Learn AngularJS', done: false },
        { text: 'Build an appp', done: false }
    ];

}]);

您可以到达此处的详细信息

Using ng-app without a value

Answer 3

你的todo.js包含第二行中的套管问题替换＆＃39; $ Scope＆＃39;使用＆＃39; $ scope＆＃39;。一旦我纠正了这个代码并且包含模块，如果你还没有像我在下面的代码中提到的那样宣布你的代码

<!DOCTYPE html>
<html ng-app="exampleApp">

<head>
<script src="scripts/angular.min.js"></script>
    <script src="scripts/underscore-min.js"></script>
    <script type="text/javascript" src="scripts/todo.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

</head>

<body>
    <div ng-controller="TodoCtrl">
 <h2>Total todos: {{totalTodos}}</h2>
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                {{todo.text}}

            </li>
        </ul>
    </div>

    <script>
        angular.module("exampleApp",[])
        .controller("TodoCtrl",function($scope){
           $scope.totalTodos = 4;
    $scope.todos = [
        { text: 'Learn AngularJS', done: false },
        { text: 'Build an appp', done: false }
    ];

        });
    </script>
</body>

无法显示绑定值

3 个答案: