angular modal ui bootstrap: Can i use another controller child of ModalInstanceCtrl? - javascript

I'm new in angular and my english is not very good, so i try to explain my problem the best i can.
I'm using the ui.bootstrap.modal in my project, and i need that the modal window i open can be controlled by another controller and not only ModalInstanceCtrl.
I want to ModalInstanceCtrl manage the common actions in a modal window, (set title, close, etc..) and then another controller (SpecificController) manage specific actions.
So this is my modal template view now:
<h1>
{{title}}
<a ng-click="closemodal()">x</a>
</h1>
<div ng-include src="specificTemplate.html" ng-controller="SpecificController"></div>
My idea is that specificTemplate.html and SpecificController can be set as a variables in the future and so having a system for manage modal windows with common actions, and other specific actions for each modal window. The include template works fine, but with the ng-controller label i get the following error:
Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
I have SpeficController defined in my controllers section.
In other similar questions in StackOverflow, the problem were that ng-controller="ModalInstanceCtrl" was set in the template, but i want/need another controller for specific actions as a child one.
How can fix this?

There are several ways you can manage this, but first of all - don't inject $modalInstance into SpecificController. If you need to close (or dismiss) a modal from within a scope created by the SpecificController you can do so by using the $close() and $dismiss() method available on the scope.
Having said the above your example is a bit too abstract to provide exact guidance so if you could provide a representative use-case using http://plnkr.co/ you would get more detailed answer.

Related

Angular clickOutside directive not working

I made a div which shows itself depending on a bool (called "menu"), and I wanted to make it so if the user clicks outside of it, the bool changes and therefore, the menu is hidden. I've read a post about this and I've searched a bit about it, and I found that this is already made by some users.
I've tried installing this one, creating the file myself and pasting this code, or even changing the last one to this, but it won't work and I don't know why.
The html is the following:
<!-- Menu tarea-->
<ng-container *ngIf="menu">
<div (clickOutside)="abreMenu(this.tareaMenu)" class="popup-menu">
<p>formulario here</p>
<hr>
<div>
<button (click)="borrarTarea(this.tareaMenu)"></button>
<span>Borrar</span>
</div>
</div>
</ng-container>
You don't have to worry about the "abreMenu()" function, that works just fine.
Both the new directive and the one installed are called the same, but there are no errors. I don't know if I messed the imports up but I'm getting nothing.
NOTE: This html file belongs to a component within "MyModule", which is imported in "AppModule", and there I've imported the "ClickOutsideModule" since I'd probably want to use it globally through the app.
Why isn't it working? Thanks.
Instead using the clickOutside directive you could use a HostListener inside your component:
// somewhere inside your component
#HostListener('document:click', ['$event'])
outsideClick(event: MouseEvent): void {
this.abreMenu(this.tareaMenu)
}
I just experienced this problem last week. My solution was that the directive had to be a part of the "other" module definition, because the component which used it, was contained in that other module.
I didn't try to test if the main app.module components(via the import of the other module) could access the directive, but the problem was solved for all components in that "other" module.
It's just my opinion but I think Angular has some serious issues with it's module system, not to be confused with the JavaScript module system. Angular needs to adopt the JavaScript (only) module system going forward.

Create modal window in AngularJS

Before learning AngularJS I learned jQuery ( + mustache for templates). Now It is difficult to understand how to work with AngularJS...
I am trying to show modal window for user. Early (jQuery) I created a template, parsed it and appended it to the DOM.
In AngularJS, if I understand correctly, there are more than one way to do it. I can use ngView directive, ngInclude directive, ngBingHtml directive, create custom directive with 'templateUrl', and may be something else...
But I dont want to load templates from server on demand, I want to create script section with type='text/ng-template' and use it.
First of all I cant understand what the right way to choose, second is how dynamicly change templates (I need put template into directive, work with template, delete template, but not directive... yes?)
Thank a lot.

Why are my angular-bootstrap tabs not rendering?

Here is the site where you can view my angular app and also view source on it: http://clearsoftinc.com/dist/
There should be three blue tabs on the screen. I'm using the tabs directive from the ui-bootstrap directive for tabs (http://angular-ui.github.io/bootstrap/). I used to have it working and now for some reason its broken. I have tried for two days to fix it, with no luck.
I have also posted a zip of the source code here: http://www.clearsoftinc.com/Archive.zip
In controller.js, change
angular.module('clearsoftDemoApp', [])
to
angular.module('clearsoftDemoApp')
If 2nd parameter of module() is presented, it defines a new application instead of getting the existing one defined in app.js.

Initialize ng-app after document is loaded

I'm working with AngularJS.
One of the (technical) requirements is to fetch the "ng enabled" HTML content from the server, in response to a click event, and inject it into a <div ng-app> via JavaScript.
The problem is that the newly injected HTML is not wired, as Angular goes through the compile and link phases only when the page is loaded the first time.
Is there a way to trigger them manually?
Am I approaching this problem in the wrong way? Is there a more idiomatic way to accomplish what I described?
Thanks
There are multiple ways to inject dynamic content into the view in AngularJS. One of the way to inject dynamic content is to use ng-include directive. It can take an endpoint from where to get view.
You can combine it with ng-if to achieve load view on click. For example:
<span ng-if="clicked">
<div ng-include='pathToTheHtml'></div>
</span>
The clicked variable would be false first, on clicking on the button set it to true, this would trigger ng-include to get the content and inject it into html.
If you want finer control then you need to use the $compile service. The html that needs to be injected into the DOM needs to be compiled and linked to the scope using $compile service. This can be done in a directive.
element.append($compile(htmlFragment)(scope))
angular.bootstrap(element, [modules], [config]);

Illegal use of ngTransclude directive with UI Router and angular-wizard

I'm using angular-wizard in a project with UI-router, you can see a demo if you click the "Create" button on the right:
http://plnkr.co/edit/XYUamusHru7eV0nvAD5i?p=preview
The wizard works fine separately from the current project, problems happen when I try to integrate it into my app I get this error in the console:
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div class="steps" ng-transclude="">
I think this has to do with the templating logic in UI-Router, or it could be the way the directive is written creates "orphans". Anyone have any ideas on what the problem is?
looks like your NewCampaign.html is using some copy+pasted dom since it has angular comments in there <!-- ngIF ... -->
once cleaning up the template, you can see that the wizard directive isn't being used in that template. The wz-step directive needs to be in the context of a wizard directive since the transclude happens inside the wz-step.
Also, removed the extra ng-app and ng-controller from the template. The controller should be defined along with the state. Check out the fixed plunkr here: http://plnkr.co/edit/c3fcV5RSUMXGIFpk8AbV?p=preview

Categories