無法獲取顯示的綁定值

我以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'不是一個函數，沒有定義。按照最新版本的建議回答總是更好。 –

謝謝。現在檢查示例。謝謝:) –

無法獲取顯示的綁定值

回答

相關問題