麻煩基本待辦事項應用程序角js

我遵循在yeoman網站中給出的創建todo應用程序的基本步驟。

這裏是我的代碼：

的index.html

<!doctype html> 
<html class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" href="styles/main.css"> 
</head> 
<body ng-app="mytodoApp"> 
    <div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"></div> 
    <script> 
     (function (i, s, o, g, r, a, m) { 
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { 
       (i[r].q = i[r].q || []).push(arguments) 
      }, i[r].l = 1 * new Date(); a = s.createElement(o), 
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) 
     })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 
     ga('create', 'UA-XXXXX-X'); 
     ga('send', 'pageview'); 
    </script> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/json3/lib/json3.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers/main.js"></script> 
</body> 
</html>

main.html中

<div class="container"> 
    <h2>My todos</h2> 

    <!-- Todos input --> 
    <form role="form" ng-submit="addTodo()"> 
     <div class="row"> 
      <div class="input-group"> 
       <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control"> 
       <span class="input-group-btn"> 
        <input type="submit" class="btn btn-primary" value="Add"> 
       </span> 
      </div> 
     </div> 
    </form> 
    <p></p> 

    <!-- Todos list --> 
    <div ui-sortable ng-model="todos"> 
     <p class="input-group" ng-repeat="todo in todos" style="padding: 5px 10px; cursor: move;"> 
      <input type="text" ng-model="todo" class="form-control"> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button> 
      </span> 
     </p> 
    </div> 
</div>

Main.js

個

'use strict'; 
angular.module('mytodoApp') 
    .controller('MainCtrl', function ($scope) { 
     $scope.todos = ['Item 1', 'Item 2', 'Item 3']; 
     $scope.addTodo = function() { 
      $scope.todos.push($scope.todo); 
      $scope.todo = ''; 
     }; 
     $scope.removeTodo = function (index) { 
      $scope.todos.splice(index, 1); 
     }; 
    });

App.JS

'use strict'; 
angular 
    .module('mytodoApp', []);

當我點擊添加按鈕，在$ scope.todo是不確定的，它的加入顯示空文本框的項目。

刪除功能工作得很好。

我想問題是與範圍界定有關。關於這個問題，任何人都可以照顧我嗎？

更新時間：

請查看以下屏幕

enter image description here 我沒有得到任何錯誤，而輸出是錯誤的。

這是嘗試添加新項目時發生的情況。

來源

2014-10-30 Sai Avinash

ngController執行在優先級500，而ngInclude執行在優先級400。

首先，ngController將創建一個範圍，然後ngInclude。也就是說，在您包含的HTML文件中，每次您想要訪問控制器中的變量時，您都需要在前綴$parent（例如， ng-submit="$parent.addTodo()"。

另一種解決方案（恕我直言更好）是清除從具有ngInclude div中ngController屬性，並把它在對周圍的div的HTML文件中：

的Index.html：

<div class="container" ng-include="'views/main.html'"></div>

main.html中：

<div class="container" ng-controller="MainCtrl"> 
    ... 
</div>

來源

2014-10-30 15:08:56 sp00m

這工作:)並感謝澄清 – 2014-10-30 15:12:59

@SaiAvinash不客氣:) – sp00m 2014-10-30 15:13:15

嘿你在這裏混合範圍首先你有一個新的項目todo和另一個「相同」的ng-repeat中的每個元素的待辦事項，你也不需要重新定義ng模型中繼器僅使用大括號表示法來引用範圍。

更改名稱，NG-重複這樣的：

<div> 
     <p class="input-group" ng-repeat="element in todos" style="padding: 5px 10px; cursor: move;"> 
      <span>{{element}}</span> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button> 
      </span> 
     </p> 
    </div>

編輯：

這是你得到了什麼

http://plnkr.co/edit/CrNrryNTiFFqzhWxaM7P

plnker代碼的工作版本：

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

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <h2>My todos</h2> 

    <!-- Todos input --> 
    <form role="form" ng-submit="addTodo()"> 
     <div class="row"> 
      <div class="input-group"> 
       <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control"> 
       <span class="input-group-btn"> 
        <input type="submit" class="btn btn-primary" value="Add"> 
       </span> 
      </div> 
     </div> 
    </form> 
    <p></p> 

    <!-- Todos list --> 
    <div ui-sortable ng-model="todos"> 
     <p class="input-group" ng-repeat="element in todos" style="padding: 5px 10px; cursor: move;"> 
      {{element}} 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button> 
      </span> 
     </p> 
    </div> 
    </body> 

</html>

控制器：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.todos = ['Item 1', 'Item 2', 'Item 3']; 
     $scope.addTodo = function() { 
      $scope.todos.push($scope.todo); 
      $scope.todo = ''; 
     }; 
     $scope.removeTodo = function (index) { 
      $scope.todos.splice(index, 1); 
     }; 
});

來源

2014-10-30 13:23:14

謝謝。你可以看看我的index.html代碼，我使用ng-include在index.html中包含main.html。這是正確的方式，還是因爲問題發生？其餘代碼與您的代碼相同 – 2014-10-30 14:36:04

打開另一個問題並標記我 – 2014-10-30 14:38:12

是ng-incude是否創建新的子範圍？ – 2014-10-30 14:38:25

麻煩基本待辦事項應用程序角js

回答

相關問題