ng-submit doesnt send data, why?

Question

http://yeoman.io/codelab/write-app.html

I am following this yeoman tutorial. But it doesnt work same.

It doesnt add new todo in to the $scope.todos And I couldnt find why.

You can also find code here: http://www.beratuslu.com/share/mytodo.rar

What I noticed is, after I clicked submit button it comes in $scope.addTodo function but with empty value. So value is not coming from the form, instead inside of MainCtrl so, kind of there is no link between form and 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 and apple-touch-icon.png in the 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 are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your 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> from the Yeoman team</p>
      </div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your 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 to be 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 the application.
 */
angular
  .module('mytodoApp', []);

main.js

'use strict';

/**
* @ngdoc function
* @name mytodoApp.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the 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 = '';
    };

});

Answer 1

I found the problem. It must be deprecated to use ng-controller directive with ng-include. So I removed it from there and put it in to 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 to be 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>

ng-submit doesnt send data, why?

Question

1 answers

solution1
0 2015-07-23 15:05:14

ng-submit doesnt send data, why?

Question

1 answers

solution1 0 2015-07-23 15:05:14

solution1
0 2015-07-23 15:05:14