angular partials template ?

[wookiesh]

Hi, not sure if am doing things right, but I would like to this base and angular-ui to create a dialog in my app. This works with the dialog service from angular for which the "open" method is passed either a template or an url as argument. I would like it to download my partial jade layout (as I would with ss.tmpl['dialog'].render() if I had "ss.client.templateEngine.use(require('ss-hogan')" but have it angular compatible so I set "ss.client.templateEngine.use('angular');" Unfortunately, that does not work, it seems to reload the full application within the dialog.

[davisford]

Hi, I'm not sure I follow you. Can you post or link some example code. I use angular-ui in other projects - shouldn't have any problem pulling it in here.

[wookiesh]

Sure sorry. So I have this in my controller to open a dialog when I click a button

$scope.openMoteDetails = (mote) ->
            $scope.dlgOpts.template = ss.tmpl['dialogs-moteDetails'].render()
            $scope.dlgOpts.resolve = {mote: () -> angular.copy(mote)}
            $dialog.dialog($scope.dlgOpts).open('dialog.jade',"MoteDetailsCtrl").then (res) ->

and the controller that gets created.

ngModule.controller 'MoteDetailsCtrl', ['$scope', 'rpc', 'pubsub', 'dialog', 'mote'
    ($scope, rpc, pubsub, dialog, mote) ->
        $scope.mote = mote
        console.log mote
        $scope.closeMoteDetails = () -> dialog.close()
    ]

some sample content in the file 'client/templates/dialog.jade'

#moteDetails(modal="moteDetailsOpen")
        .modal-header
            button(type="button", aria-hidden="true", data-dismiss="modal").close ×                
            h3 Mote Details {{essai}}

        .modal-body
            legend Standard registers
            .row
                    label State: {{mote.state.str}}
                    label Last Status at: {{renderDate(mote.lastStatusTime)}}
                    label Location:
                    input(type='text', ng-model='mote.location')
                    label Address:
                    input(type='number', ng-model='mote.address')                        
        .modal-footer
            a(href="#", ng-click='closeMoteDetails()').btn Close  
            a(href="#", ng-click='saveMoteDetails()').btn.btn-primary Save changes      

With ss-hogan in ss.client.templateEngine.use, I would have tried $scope.dlgOpts.template = ss.tmpl['dialog'].render() and nothing as argument in open() but then of course the double curly braces are interpreted by hogan and disappear.

If I try with ss.client.templateEngine.use('angular'), my dialog.jade file seems not to be available. For example, in the browser console, where ss.tmpl['dialog'] is ok with hogan, it is not with 'angular'.

[davisford]

It's a bit tough to debug that from here. Do you have it in a public github repo that I can checkout? So, you are using the angular-ui bootstrap dialog directive? modal.open(options) will use jQuery to try to load a remote resource -- I don't know that you can load .jade that way, since you aren't involving socketstream in any way. SS needs to be triggered to compile the remote jade template.

Inspect the template after $scope.dlgOpts.template = ss.tmpl['dialog-moteDetails'].render() -- is it valid html? If you replace the .jade with a sample .html file will it load that? Is there an error in the console -- does it try to make an HTTP request, what's the url?

[wookiesh]

Here is the repo for my tests: https://github.com/eagleamon/Swap Yes I tried the dialog directive (commented out right now, I went back to modal to get it work for now). Here, http://angular-ui.github.com/bootstrap/#/dialog, they pass the template as a string in the
var d = $dialog.dialog($scope.opts); call. That's way I tried to do t = ss.tmpl["dialog"].render() but Hogan.js interprets the {{}} so it does not work (but it is valid html)

Here, https://github.com/angular-ui/bootstrap/tree/master/src/dialog, the approch is to pass the template url to the open function var d = $dialog.dialog({modalFade: false, resolve: {item: angular.copy(item) }}); d.open('dialogs/item-editor.html', 'EditItemController');

but I can't get this to work (probably a problem with my routing), it seems the whole app is loaded in the dialog.

Hope I am not too obscure..