CODEWITHSUNDEEP
node.jsexpressangularjspug
Kdigital
Kdigital

Reputation: 3947

Can Angular.js do Interpolation in Jade templates in a Script Tag?

I'm using angular with jade templates and I have some javascript in the template:

script(type='text/javascript')
    console.log('{{name}}');

In my angular controller I do something like the following:

$scope.name = "Bhoutrous";

I can get {{name}} to interpolate correctly anywhere else in the template just as long as it is not under a script tag. For me, angular throws a "SyntaxError: invalid property id" error. I'm wondering if it's a Jade issue or is there a work-around. I need to have the contents of the'name' variable passed to a js function when the page loads.

UPDATE

I know that it can work with regular templates. fiddle of the example below: http://jsfiddle.net/atentaten/mnscA/

Does anyone have any experience in doing something like this using jade?

HTML:

<div ng-controller="UserCtrl">
    <p>{{data}}</p>
    <div id="dat"></div>

    <script type="text/javascript">
       function doit(text){
          var el = document.getElementById("dat");
           el.innerHTML = text;
       }

      doit( '{{data}}' );  
    </script>
</div>

JS:

var app=angular.module('myApp', []);

function UserCtrl($scope) {
        $scope.data = "Green Applese";

};

Upvotes: 2

Views: 4597

Answers (2)

Jorge Eduardo
Jorge Eduardo

Reputation: 141

A form which work for my in jade 

div(ng-controller="UserCtrl",anotherAttr="yourValue")
    p#dataBind {{data}}
    div#dat
    script.
       function doit(text){
          $("#dat").html(text)
       }      
       doit($("#dataBind").text());

Note the dot "." after the script tag, this allow put js code in jade

Upvotes: 0

Michelle Tilley
Michelle Tilley

Reputation: 159105

Angular does interpolation in DOM elements. Contents of script tags and other random strings aren't interpolated. You can access Angular services, including the $interpolate service, outside of the Angular application lifecycle; I answered a question much like this yesterday. But, like in that answer, I suggest that this is not really a good way to write applications with Angular.

Upvotes: 0

Related Questions