javascript - ng-submit doesnt send data, why? -
http://yeoman.io/codelab/write-app.html
i following yeoman tutorial. doesnt work same.
it doesnt add new todo in $scope.todos , couldnt find why.
you can find code here: http://www.beratuslu.com/share/mytodo.rar
what noticed is, after clicked submit button comes in $scope.addtodo function empty value. value not coming form, instead inside of mainctrl so, kind of there no link between form , mainctrl.
whats wrong?
thank you..
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"> <!-- place favicon.ico , apple-touch-icon.png in root directory --> <!-- build:css(.) styles/vendor.css --> <!-- bower:css --> <!-- endbower --> <!-- endbuild --> <!-- build:css(.tmp) styles/main.css --> <link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <!-- endbuild --> </head> <body ng-app="mytodoapp"> <!--[if lt ie 7]> <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p> <![endif]--> <!-- add site or application content here --> <div class="header"> <div class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#/">mytodo</a> </div> <div class="collapse navbar-collapse" id="js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#/">home</a></li> <li><a ng-href="#/">about</a></li> <li><a ng-href="#/">contact</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div ng-include="'views/main.html'" ng-controller="mainctrl"></div> </div> <div class="footer"> <div class="container"> <p><span class="glyphicon glyphicon-heart"></span> yeoman team</p> </div> </div> <!-- google analytics: change ua-xxxxx-x site's id --> <script> !function(a,n,g,u,l,a,r){a.googleanalyticsobject=l,a[l]=a[l]||function(){ (a[l].q=a[l].q||[]).push(arguments)},a[l].l=+new date,a=n.createelement(g), r=n.getelementsbytagname(g)[0],a.src=u,r.parentnode.insertbefore(a,r) }(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'ua-xxxxx-x'); ga('send', 'pageview'); </script> <!-- build:js(.) scripts/vendor.js --> <!-- bower:js --> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> <!-- endbower --> <!-- endbuild --> <!-- build:js({.tmp,app}) scripts/scripts.js --> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> <!-- endbuild --> </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 done?" class="form-control"> <span class="input-group-btn"> <input type="submit" class="btn btn-primary" value="add"> </span> </div> </div> </form> <br> <p class="form-group" ng-repeat="todo in todos"> <input type="text" ng-model="todo" class="form-control"> </p> </div> app.js
'use strict'; /** * @ngdoc overview * @name mytodoapp * @description * # mytodoapp * * main module of application. */ angular .module('mytodoapp', []); main.js
'use strict'; /** * @ngdoc function * @name mytodoapp.controller:mainctrl * @description * # mainctrl * controller of mytodoapp */ angular.module('mytodoapp') .controller('mainctrl', function ($scope) { $scope.todos = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']; $scope.todo="new todo"; $scope.addtodo = function () { console.log($scope.todo);//empty $scope.todos.push($scope.todo); //$scope.todo = ''; }; });
i found problem. must deprecated use ng-controller directive ng-include. removed there , put in main html.
<div class="container" 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 done?" class="form-control"> <span class="input-group-btn"> <input type="submit" class="btn btn-primary" value="add"> </span> </div> </div> </form> <br> <p class="form-group" ng-repeat="todo in todos"> <input type="text" ng-model="todo" class="form-control"> </p> </div>
Comments
Post a Comment