Angular prettyPhoto $scope - angularjs

I have a problem with acessing $scope in prettyPhoto inline opened HTML.
This is simple HTML in which I have ng-click.
<div id="inputMask" class="gridSystem modalWindow responsive" style="display:none;">
...
</div>
and here is JS for creating prettyPhoto modal window:
$.prettyPhoto.open('#inputMask','','');
PrettyPhono creates special DIV, which I cannot connect with controller and/or $scope.
Does anybody have any idea how this should be made?
Tnx

AngularJS would not work with dynamically generated content that the prettyphoto plugin generates, since angular needs to compile the html and setup the necessary watches.
You need to wrap the jquery plugin into a directive and manually update the scope elements based on the events handlers available for the plugin.

Related

Ng-bind-html not working with custom components

I am using typescript with Angular. My requirement is to dynamically fill the contents of the tab.
I have a variable which has HTML content with Angular components included using ng-include.
I m using this variable in my HTML inside ng-bind-html tag. It is not recognising the Angular tags.
I'd I just use Normal HTML tags, it compiles fine.
In your plunker, Angularjs is never included, you don't have ng-app directive at the top, so I don't see how it can recognise anything related to Angularjs

jQuery code in Angular

I was forced to use jQuery code in Angular to hack a plugin that I need to use; should I put this code in the controller or in a <script> tag in the html (to have code that manipulates DOM close to the DOM)?
Its better you write your own custom directive. Please follow here at https://docs.angularjs.org/guide/directive.
You should keep the view logic separate either to HTML or to directives. Angular recommends this to keep your business logic separate from view logic.

custom directive within ng-template does not work

I am using script tag with ng-template for displaying my form in modal dialog.
I am using angular ui $modal service here.
My issue is, when I pass templateUrl argument to $modal service with my ng-template, my custom directive within ng-template is not processed by angular
see
http://plnkr.co/edit/enPgDg6QnNPv1e7Z2T2X?p=preview
where my custom directive <myDirective></myDirective> is not being rendered on modal dialog.
any quick help will be appreciated
Hi please see here http://plnkr.co/edit/Zvhu4OMDqpHFOgTCg5bU?p=preview
If name of your directive is 'myDirective' in HTML you should use <my-directive>
Read more here https://docs.angularjs.org/guide/directive

Angularjs - How to load views into a popup

What's the best way to have my views appear in a popup modal?
I have the main dashboard of my app, and then whenever the user wants to add or edit an item on the dashboard I want this to be done via a form in a popup modal.
I know I can use jquery to handle the showing and hiding of the popup. But is there an angular way to do this, or is jquery acceptable in this scenario?
Check this out and go down to the modal section. This looks nice and clean. There is an example of the html and javascript there for you. Your view is a template and can be a html file or inline html inside the javascript.
http://angular-ui.github.io/bootstrap/
Much like everything in Angular, there are a number of ways you could do this. Perhaps the most simple way would be to have the HTML of the modal be hidden by either ng-show or ng-hidein conjunction with ng-mouseover.
I'm actually doing this right now and decided to use jquery ui for the modal. Dragging and resizing is hard to do and my modal requires that. I wrap the modal call in a directive so modal pops up onclick. The mistake I made was using jquery append to add new html. Don't do this. Use template or templateUrl and then put that in your modal. This will ensure all scope vars in your modal will communicate with your controllers.

Using 3rd Party Javascript in AngularJS Partials?

I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?

Resources