CODEWITHSUNDEEP
javascriptangularjsnode.jsexpresspug
SPtheSlayer
SPtheSlayer

Reputation: 21

Angular data-binding not working with Jade

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')));

Upvotes: 2

Views: 1582

Answers (1)

michelem
michelem

Reputation: 14590

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")

Upvotes: 0

Related Questions