Angular / Nodejs / Jade dynamically display partials

Question

I have a single page that will display multiple partials, depending on the database values. AT the moment i am just using show/hide to display the div however I would like to do it the proper Angular way, I have been having trouble with it though.

My routes.js is

exports.index = function(req, res){
  res.render('index');
 };

exports.partials = function (req, res) {
 var name = req.params.name;
  res.render('partials/' + name);
};

My Controller is

function AppCtrl($scope, $http, $q, socket, $location) {

$scope.config = [[ return variables from HTTP call ]]

if($scope.config.name =='video') $scope.mainpVideo ==true;
else $scope.mainpVideo ==false;

if($scope.config.name =='audio') $scope.mainpAudio ==true;
else $scope.mainpAudio ==false;

if($scope.config.embed =='qa') $scope.qa ==true;
else $scope.qa ==false;

Index.jade

         #box-1-content.auth-form-body(ng-show="mainpAudio"  )
              include partials/audio 
              ul.presenterList
                li Presenters:
                li(ng-repeat='presenter in presenters' ){{ presenter.name }}
              br.clr  

             #box-1-content.auth-form-body(ng-show="mainpVideo" )
              include partials/video 
              ul.presenterList
                li Presenters:
                li(ng-repeat='presenter in presenters' ){{ presenter.name }}
              br.clr      

         #box-2-content.auth-form-body(ng-show="qa" )
              include partials/qa 
              br.clr

.......

As said its a single page and there would be multiple partials included depending on the config store in the database, how can this be done?

Code like `if($scope.config.name =='audio') $scope.mainpAudio ==true; else $scope.mainpAudio ==false;` makes Baby Jesus cry. Your double-equals should be triple-equals in the first case and single-equals thereafter and the whole thing should be `$scope.mainpAudio = ($scope.config.name === 'audio')` — Michael Lorton, Apr 22 '14 at 06:27

score 0 · Answer 1 · answered Apr 22 '14 at 06:29

0

I don't know Jade, but I'm guessing something like

div(ng-include="'partials/' + config.name")

will do what you want.

answered Apr 22 '14 at 06:29

Michael Lorton

43,060
26
103
144

Thanks for the reply, unfortunately it doesn't work, nothing is displayed and I get no error message. If I change the include to something that doesn't exist ie div(ng-include="nothing/nothing") I get an error. – Richard Mc Apr 22 '14 at 06:53
Check Firebug to see what, if anything, is actually loaded. – Michael Lorton Apr 22 '14 at 08:18
No there wasn't any partials loaded in the network tab – Richard Mc Apr 23 '14 at 01:50

score 0 · Accepted Answer · answered Apr 25 '14 at 00:50

0

I had solved it by using the ng-switch-when and setting the 2 variables in scope

answered Apr 25 '14 at 00:50

Richard Mc

162
1
14

Angular / Nodejs / Jade dynamically display partials

2 Answers2