Angular data-binding not working with Jade

Question

I wrote this test code just to check if Angular is working with Jade.

layout.jade

doctype html
html
  head
    title #{title}
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-app='app')
    block content
    script(type="javascript" src="/vendor/bower/angular/angular.min.js")
    script(type="javascript" src="/public/app/module.js")

index.jade

extends layout
block content
  div(ng-controller="mainCtrl")
      h1 #{title}
        input(type="text" ng-model="something")
        | {{something}}

But {{something}} is always displayed as a string & not a placeholder.

This question has been asked a number of times, I have checked out the answers but couldn't fix it.

SOLVED: This should be useful for beginners

Turns out I wasn't specifying the files correctly,

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type="text/javascript" src="/bower/angular/angular.min.js")
    script(type="text/javascript" src="/javascripts/app/module.js")
  body(ng-app="app")
    block content

As the directory of the static assets,

app.use(express.static(path.join(__dirname, 'public')));

is already defined in the the express app.

Moreover, I had to add another middleware for 'vendor' in app.js (express) that is,

app.use(express.static(path.join(__dirname, 'vendor')));

Is both in the same directory? Can you do extends layout.jade with the extension — geckob
– geckob, Commented Jul 5, 2015 at 0:47
fyi, this generator has sample files for jade + angular - github.com/DaftMonk/generator-angular-fullstack/tree/master/app/… — YOU
– YOU, Commented Jul 5, 2015 at 4:52

michelem · Accepted Answer · 2015-07-05 06:54:59Z

0

Try with something like this:

extends layout
block content
  div(ng-controller="mainCtrl")
      h1 #{title}
        input(type="text" ng-model="something")
          span(ng-bind="something")

answered Jul 5, 2015 at 6:54

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SPtheSlayer Over a year ago

Thank you, it works fine this way too. I wasn't specifying the files & middlewares correcty.

Collectives™ on Stack Overflow

Angular data-binding not working with Jade

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related