无法显示绑定值

Unable to get binding value displayed

本文关键字：绑定 显示      更新时间：2023-09-26

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

索引.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>

待办事项.js

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

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

在下面的示例中，您会注意到我将 ng-app 属性放在div 的反对标签内。这是因为我无法访问代码笔中的 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>

更改此内容 

$Scope

对此

$scope

你还需要

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

索引.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>

待办事项.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 }
    ];
}]);

您可以在此处获得更多信息

使用不带值的 ng-app

您的待办事项.js在第二行中包含大小写问题 将"$Scope"替换为"$scope"。 一旦我纠正了它，您的代码就可以工作，如果您还没有像我在下面的代码中提到的那样声明，请包含模块

<!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>
相关文章：