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
Related
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
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.
I am using $modal for opening modals.
I have a modal that contains a ui-view. States using the ui-view need to wait until the modal has been added into the DOM, otherwise the states will not find the ui-view to load templates into.
Anyone have a good way for delaying the loading of a template? I have considered a promise that resolves once the modal's controller has been initialized, but I fear it is overcomplicating things.
Thanks
So if anyone is going down the same road, I ended up using Jquery-based foundation for my modal control, rather than the angular-foundation $modal service. With the jquery foundation modals, I can add a hidden modal div to my main template, containing the ui-view. So there is never any waiting for the modal to be appended to the DOM. Activating the modal is just unhiding the modal's div. This solved all timing issues and works as intended.
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.
i'am using a popOver that show a list of bottons, those buttons have a simple ng-click that is not working. can someone help me?
here a simple example:
http://plnkr.co/edit/YfC6RxVMO3jmGguHXgXu?p=preview
You're cloning the HTML and rendering it outside of Angular, so it's not going to have any of the bindings you'd expect. Instead of using Twitter's Bootstrap directly in your Angular application, I would recommend using Angular's UI Bootstrap instead. It has its own popOver that was written to work with Angular:
http://angular-ui.github.io/bootstrap/#popover