CODEWITHSUNDEEP
angularjspug
user3294779
user3294779

Reputation: 623

2 way data binding with jade form

I'm trying to attach two text input fields to the $scope using ngModel. Here is my code:

extends layout

block content
    h1 hello from partials
    form(name='login') 
        label(for='username') username
            input(type='text' name='username' id='username' ng-model='credentials.username')
    br
    label(for='password') password
        input(type='text' name='password' id='password' ng-model='credentials.password')
    button(type='submit') submit

Even after I press submit the credentials do not change on the $scope. They are set to empty string by default, and stay that way after submitting. Is my jade form not written correctly?

The controller code looks like this:

myApp.controller('mainController' , function($scope){
    window.scope = $scope;
    $scope.credentials = {username: '' , password: ''}
})

and layout.jade looks like this:

doctype html
html(ng-app='myApp')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    div(ng-controller='mainController')
    block content
    script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js')
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular-route.js')
    script(src='/javascripts/myApp.js')

Upvotes: 1

Views: 1696

Answers (1)

Ven
Ven

Reputation: 19040

Your block content is not nested under your controller, which is why ng-model is not changing your scope.

This would work :

div(ng-controller="mainController")
  block content

But you'll probably want a per-page controller anyway (you can still keep this one, though - controllers act like a hierarchy, in the same way as JS prototypes)

Upvotes: 1

Related Questions