search

Flyer53 / jsPanel3

A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
http://v3.jspanel.de/
Other
89 stars 21 forks source link

How to get angular to load in content #5

Closed whittssg closed 8 years ago

whittssg commented 8 years ago

Hello, does anyone know how i could get angular to load inside a jspanel..

i can get the panel to show using the following:

$.jsPanel({ contentAjax: { url: 'app/kasearch/dialog/kasearchdialog.html', autoload: true, }, contentSize: { width: 550, height: 300 }, theme: 'royalblue filledlight', headerTitle: $scope.curentKa.kaId });

the html shows but from the looks of it the angular controller is not loaded. Thanks

Flyer53 commented 8 years ago

I'm not working with Angular myself. But looking at your code above, and since option.contentAjax is async, $scope might simply not be there yet when you try to access it (assuming it's generated by the html you load). How about:

$.jsPanel({
    contentAjax: {
        url: 'app/kasearch/dialog/kasearchdialog.html',
        autoload: true,
        done: function( data, textStatus, jqXHR, panel ) { 
             panel.headerTitle($scope.curentKa.kaId);            
        }
    },
    contentSize: {
        width: 550,
        height: 300
    },
    theme: 'royalblue filledlight',
});
whittssg commented 8 years ago

Thanks for helping. The header title actually works fine ($scope.cuurentka.kaId)... It the HTML that cannot reach the angular controller.. Its almost like i need to include the angular.js file in the HTML file to get it to work.. Its the first time ive used a none angularjs libary in my code before so i am probably missing something really simple. I would have used an angular js libary but none seem to exist for this functionality - i am actually surprised that no one has made an angular port :) Il probably have to figure out how to make a directive for it.

Flyer53 commented 8 years ago

Well, sorry that I can't be of help concerning Angular. But maybe this helps a bit, although it's using jsPanel 2.x http://www.sharepointpals.com/post/Floating-panel-for-angular-js

whittssg commented 8 years ago

Thanks for the link, i got the directive working fine.I couldnt use the ajax load though to load the html file for some reason (angular just fails to work) so i ended up using content: and then loading the url with a http request followed by a compile:

 $http.get('app/kasearch/dialog/kasearchdialog.html')
                    .then(function (response) {
                        var htmlcontent = $compile(response.data)($scope);
                        $.jsPanel({
                            content: htmlcontent,
                            headerTitle: "Finally",
                            theme: "grey"
                        });
                    });

Everything works fine now... thanks again for an awesome library.

Flyer53 commented 8 years ago

My pleasure Btw: I'm pretty close to the final release of version 3 ... maybe sometime tomorrow. If you have an idea for something that might be an improvement for jsPanel .... don't hesitate to tell me. I won't stop working on it and I'm always happy about input/feedback.

Flyer53 commented 8 years ago

The final version 3 is released http://jspanel.de/downloads/jsPanel-3.0.0.zip

whittssg commented 8 years ago

Awesome.. Thanks

AviHafner commented 8 years ago

Stefan Congratulations jsPanel 3 is a great product

My Little Problem: When I open your site in Microsoft Edge, I get console log Error. The error repeats five times. The error That appears: CSS3120: No fonts available for @ font-face rule This error appears in my project and probably in any site that contains the JSPanel 3

many thanks for JSPanel 3

Flyer53 commented 8 years ago

Hi Avi ... and thank you very much :)

I never had this error and don't seem to be able to reproduce it. You didn't say that the control icons are not showing, so I assume that the font is actually loaded in spite of the error message?

Regards, Stefan

PS: I'm a little bit limited right now since I'm on vacation for about 2 weeks. And my only internet access is the mobile phone. So I can't do that much currently...

AviHafner commented 8 years ago

enjoy in your holiday, when you coming back ,I will Send you instructions, How to see the error in your site http://jspanel.de/

Hafner Avi • (w): 972-4-829-5728 • hafner@technion.ac.ilmailto:hafner@tx.technion.ac.il

From: Stefan Sträßer [mailto:notifications@github.com] Sent: Friday, June 17, 2016 12:08 PM To: Flyer53/jsPanel3 jsPanel3@noreply.github.com Cc: AviHafner Avi.Hafner@gmail.com; Comment comment@noreply.github.com Subject: Re: [Flyer53/jsPanel3] How to get angular to load in content (#5)

Hi Avi ... and thank you very much :)

I never had this error and don't seem to be able to reproduce it. You didn't say that the control icons are not showing, so I assume that the font is actually loaded in spite of the error message?

Regards, Stefan

PS: I'm a little bit limited right now since I'm on vacation for about 2 weeks. And my only internet access is the mobile phone. So I can't do that much currently...

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/Flyer53/jsPanel3/issues/5#issuecomment-226719475, or mute the threadhttps://github.com/notifications/unsubscribe/AI8bxzdBDWKeB4ULL162EpElVcmOteSCks5qMmP8gaJpZM4IzPNy.

Flyer53 commented 8 years ago

@AviHafner Hi Avi, do you still have the error concerning @font-face? I made a change to the css in version 3.0.1 that hopefully fixed it ??

Regards, Stefan

AviHafner commented 8 years ago

Hi stefan I in stage of installing new version of my project include jQuery 3.1.0 My operation system is windows 10 latest preview , and I am going to check this behaver in Edge Browser original windows 10 .

After all the amendments i am going to notify you with the results.

Hafner Avi • (w): 972-4-829-5728 • hafner@technion.ac.ilmailto:hafner@tx.technion.ac.il

From: Stefan Sträßer [mailto:notifications@github.com] Sent: Monday, July 11, 2016 10:16 AM To: Flyer53/jsPanel3 jsPanel3@noreply.github.com Cc: AviHafner Avi.Hafner@gmail.com; Mention mention@noreply.github.com Subject: Re: [Flyer53/jsPanel3] How to get angular to load in content (#5)

@AviHafnerhttps://github.com/AviHafner Hi Avi, do you still have the error concerning @font-facehttps://github.com/font-face? I made a change to the css in version 3.0.1 that hopefully fixed it ??

Regards, Stefan

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Flyer53/jsPanel3/issues/5#issuecomment-231658620, or mute the threadhttps://github.com/notifications/unsubscribe/AI8bxz0NXTTHObSU4tfOiHZ4xPggI4R0ks5qUe26gaJpZM4IzPNy.

Flyer53 commented 8 years ago

@AviHafner

Copied :)

Just for info: I'm currently working on the .resize() method with the following additions: