If I use a ng-view nested in an element that has a controller defined, will that controller interfere with the controllers that are loaded by ng-view (html file loaded)?
In my initial tests nothing happened, but I'm still in doubt if I tested it wrongly if it really allows it.
<div class="container-fluid" ng-controller="ExampleController">
<ng-view></ng-view>
</div>
Related
I have a simple search form which I have it included in two different pages using ng-include directive. I would like to bind them both to the same scope in such a way that when the user navigates between the pages, they'll keep seeing the same search data they've entered in either of the copies.
I have managed to implement an untidy solution using rootScope, but would like to know if this can be implemented in a proper, cleaner way?
I also used root scope slove it, my layout below:
<div id="page-header" ng-include="'views/layouts/header.html'"></div>
<div id="content">
<div ui-view="content" ng-cloak></div>
</div>
<div id="page-footer" ng-include="'views/layouts/footer.html'"></div>
<div id="toastElement">
<ul id="toastBox"></ul>
</div>
header.html bound HeaderController, the functions in HeaderController include search, login, logout, register and both working on $rootScope. Is it helpful?
I'm trying to split up my HUGE main.html page into smaller parts so it will be better maintainable. It seems that ng-include is the way to go since i'm using angular already.
I'm not sure, but as soon as I use ng-include it seems the CSS of my website seems to fail... there's no error in the Crome console
Here's my main.html
<div ng-include src="'AddRegion.html'"></div>
<div class="addbutton">
ADD
</div>
and here is my AddRegions.html
<div class="popup">
<h2>Add Region</h2>
<a class="closeBut" href="Main.html#close" ng-click="showAdminMenuContainer()"></a>
</div>
I already tried putting the code within the divs, i also tried adding the ng-include on top of the main.html like:
<ng-include src="'AddRegion.html'"></ng-include>
But that doesn't seem to work for me. The files are in the root, so no folder problems, Crome is not giving any errors in the console.
I have an issue that when ng-app is on the same tag as (AngularUI) ui-view, none of my tests run and I get:
Error: Error while waiting for Protractor to sync with the page: {"message":"angular.element(...).injector(...) is undefined","stackTrace":[{"fileName":"http://localhost:3000/","lineNumber":71,"methodName":"anonymous/<"},{"fileName":"http://localhost:3000/","lineNumber":76,"methodName":"anonymous"},{"fileName":"http://localhost:3000/","lineNumber":68,"methodName":"handleEvaluateEvent"}]}
Html that gives me the above error:
<html><head></head><body>
<div ng-app="app" ui-view></div>
</body></html>
If I move the ui-view directive to a nested div, my tests work fine:
<html><head></head><body>
<div ng-app="app">
<div ui-view></div>
</div>
</body></html>
My app works fine with either tag configuration, only the tests have errors with the first one.
What could be the explanation for this behavior?
The problem is that when ng-app and ui-view are declared on the same element, angular.element().injector() is undefined. However, if they're on different elements, the injector exists for both elements.
This is because of an interaction between ui-router and angular, because the ui-view directive uses transclusion. Using a directive using transclusion on the same element as ng-app results in it not having the correct injector via angular.element().injector(). Here's a simplified example: https://gist.github.com/juliemr/ffccf5bbe5b88a2d3da9
I think that this is all working as intended and the solution is to just not use ng-app and ui-view on the same element.
I would like to apologize that I couldn't provide any code snippet regarding this question, I am a newbie about AngularJS.
<div ng-repeat="item in list" ng-view></div>
Using the code above, would it be possible to render different template which would be dependent on item.type property. I was expecting a result like this:
item.type == "image" returning: <div><img src="'IMAGE_URI'"></div>
item.type == "text" returning: <div><p>TEXT</p></div>
As of now I have create a template html for the enumeration of item.type. Is this concern possible using AngularJS? I've recently learned that ng-view accompannied with ng-route.
I think one way you can do it is to use 'ng-if' to conditionally include html:
<div ng-repeat="item in list">
<div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
<div ng-if="item.type == 'text'><div><p>TEXT</p></div>
</div>
You can have only one ng-view,
take a look at this answer.
from the documentation for ng-view:
ngView is a directive that complements
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.
Every time the current route changes,
the included view changes with it according
to the configuration of the $route service.
Requires the ngRoute module to be installed.
What you're looking for is ng-include, combined with ng-switch,
take a look at this answer on how to combine the two.
ng-include creates a new child scope, which in turn inherits from the controller.
have a look at this answer for more information about the topic.
PROBLEM
I have a dom element, which i want to detach it from its parent and append it at some other location in the dom, angularjs way.
i could easily do this in jquery with detach and appendto, but i am unable, to find the same in angularjs way.
var detached = jQuery('.toBeDetached');
jQuery('.itemMaximixed').append(detached);
Note i need to detach since the element contains a map in it.
It may not be applicable in your case, but you can use the transclude facility of an Angular directive to do this.
I don't think attaching and deattaching would work. What I can suggest is destroying the recreating the template under different node.
You can use something like ng-if in Angular 1.1.5 for this. Using multiple ng-if and associated conditions you can bind the same template at multiple location, which ever ng-if returns true that template would get loaded.
The template code can be duplicated or be out inside a ng-template script. Something like this
<div id='parent'>
<div id='child1'>
<div ng-if='condition1'><ng-include src='datatemplate' /></div>
</div>
<div id='child2'>
<div ng-if='condition2'><ng-include src='datatemplate' /></div>
</div>
</div>
<script id='datatemplate' type='text/ng-template'>
<!-- Template HTML -->
</script>