无法获取显示的绑定值

我以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 } 
    ]; 
}

来源

2016-01-23 Waqas Ahmad

这是我得到的输出。总计待办事项：{{totalTodos}} –

您的代码用于声明控制器和应用程序模块？ –

如上所述，您需要var app = angular.module不太清楚我在移动设备上的代码是什么。 –

您需要实现的模块和控制器代码为角度（基本的例子链路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-应用属性。

实施例：<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>

附加HTML例如使用NG-bind属性：

 <!--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>

来源

2016-01-23 13:50:36

没问题，我很高兴我可以帮助回答你的问题。你也可以使用ng-bind而不是{{statement here here}}。我知道有时如果页面需要一些加载，你可能会看到{（语句去这里）}之前角呈现到屏幕上，ng-bind将隐藏它，直到它被加载。我会添加它我的代码笔示例如果你想检查出来 –

再次感谢你希望今后也能看到你的宝贵意见问候 –

没问题，我会随时帮忙，我用我正在说话的ng-bind属性更新我的答案关于。我希望你喜欢学习angular。下面是一些关于codepen的例子的链接http://codepen.io/collection/ABNPEB/有一些基本的模板和一些其他的例子，你可能在你的学习中取得进步 –

你

包含todo.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>

来源

2016-01-23 13:53:33 Umamaheswaran

明白了，非常感谢:) –

更改此

$Scope

对此

$scope

您尚未宣布

您还需要

NG-应用= “应用程序”，这是你的模块的名字，我相信你还没有定义你的模块

的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>

待办事项。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

来源

2016-01-23 13:57:51

在示例中，请参阅[这（体面的）解释为什么有时会看到'ng-app'没有值]（http://stackoverflow.com/a/30622342/419956）你实际上很需要*来命名你的模块。 – Jeroen

1.3之前如果你用最新的代码执行相同的代码，你会得到“错误：[ng：areq]参数'SomeController'不是一个函数，没有定义。按照最新版本的建议回答总是更好。 –

谢谢。现在检查示例。谢谢:) –

无法获取显示的绑定值

回答

相关问题