I have a simple angular app but the template is growing. I want to split it and use the ng-include directive but I can't get it to include correctly.
current template.html
<div class="edit-object-form" ng-show="editable">
<!-- ... -->
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
desired template.html
<div class="edit-object-form" ng-show="editable">
<div ng-include="/partials/edit_objet_form.html"></div
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
The default value of editable is false, but when I switch to true the include directive doesn't work.
Note: I'm using Angular-1.0.7
I'm not able to recreate this issue. Take a look at this plunker that loads two different templates. (The both look odd, since they're templates stolen from other plunkers to allow for xss).
Maybe this issue is caused by the two incomplete div ending tags, that are .
Related
Maybe its just the fact that I'm not used to using them, but it's hard for me to read and debug templates. I’m trying to figure out if there is a way to use JSX outside of render method or a good linter that would look inside the templates, but can't seem to find anything.
example of the simple issue where closing tag of is missing inside a template:
template:
<div id="movie-filter">
<h2>Filter results</h2>
<div class="filter-group">
<check-filter
v-for="ganre in ganres"
v-bind:title="ganre"
v-on:check-filter="checkFilter"
<!-- forgot to close the tag with ">" -->
</check-filter>
</div>
</div>
Thanks, any recomendations apreciated!
I am using ionic tinder cards and each new card should be inserted in an predefined array as an object, likewise:
{text: "some_text"}
However, I might be getting html in the string and I want that html to be rendered. How can I do this considering the object above goes to a predefined array, something happens on the ionic code and then I inject it like this?
<div class="card">
{{card.text}}
</div>
use ng-bind-html directive: may be require import the sanitize module
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
You should use ng-bind-html
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
If your HTMl contains potentially dangeorus tag (like script tag), you should sanitize it before
I have 2 list of items say, news and people.
These 2 lists have different logic and are located in different pages, so don't share shame ng-app:
<!-- News.html -->
<div id="newsList" ng-app="newsListApp">
<div id="{{news.id}}" ng-app="modalApp" ng-repeat="news in newsList">
...
</div>
</div>
<!-- People.html -->
<div id="peopleList" ng-app="peopleListApp">
<div id="{{person.id}}" ng-app="modalApp" ng-repeat="person in people">
...
</div>
</div>
I need to open each item in a modal popup, so I have to use a modalApp, but I want to use the same modalApp(that will use the same popup template) in the news and people lists...
What is the concept of sharing angular application/modules in cases like this?
You can't do it using ng-app. You have to manually bootstrap at least one of them. See this question for more info.
I think you are mixing up ng-app and ng-controller. Probably you are looking for something like this. In general angular only expects one app per page, and they certainly shouldn't be nested
<body ng-app="myApp">
<div id="newsList" ng-controller="newsListCtrl">
<div id="{{news.id}}" ng-controller="modalCtrl" ng-repeat="news in newsList">
...
</div>
</div>
<div id="peopleList" ng-controller="peopleListCtrl">
<div id="{{person.id}}" ng-controller="modalCtrl" ng-repeat="person in people">
...
</div>
</div>
</body>
https://docs.angularjs.org/api/ng/directive/ngController
Edit:
If news and people are different pages then you need a router of some kind. Your main options are ngRoute or ui-router. I think ui-router is more flexible to I would go with that. Couple of useful links that might help out:
https://scotch.io/tutorials/angular-routing-using-ui-router
http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview
From what I read, the most common cause of this problem is when the controller is included in the template and in the route provider. In my case, only the parent template containing this html is being included in the router, and has its own controller. The sub-templates are being included as a result of a menu selection
So, whenever the menu item is selected, the template gets loaded in, and everything in the controller executes twice. Can it be a product of the the ng-switch or ng-include?
<span ng-switch on="selection">
<div ng-switch-when="0">
<div ng-include="'partials/one.html'" ng-controller="oneController"></div>
</div>
<div ng-switch-when="1">
<div ng-include="'partials/two.html'" ng-controller="twoController"></div>
</div>
<div ng-switch-when="2">
<div ng-include="'partials/three.html'" ng-controller="threeController"></div>
</div>
</span>
Edit:
The included partials do not include the controller again. I've triple checked that these controllers are not mentioned anywhere other than this piece of code. The contents of the one/two/three partials look like this, and the controller still runs twice.
<div>Nothing to see here.</div>
I am making an educated guess here... but does your "'partials/one.html'" also have a ng-controller="oneController" in it? If so, you either need to remove the ng-controller declaration from your include div or from your partial.
Hey all I'm trying to get a feel for angular and have ran into a little snag.
I have a container structure like the following:
<div class="main-container" ng-view>
<!-- The below divs are constantly being
reloaded based on the current URL and it's associated view -->
<div class="left-col">
</div>
<div class="right-col">
</div>
</div>
Before I implemented Angular I just had a simple script that would check the height of the window and set the height of the left column and right column divs accordingly.
With angular there is probably a better way to do this then attaching an event function to the window object. Basically I want to fire a function everytime a new view is rendered but not duplicate the below code in all of my angular controllers like so:
$scope.$on('$viewContentLoaded', setColumnHeight);
Any help would be appreciated. Thanks!
I've solved this problem in my app by having a root "Application Controller" at the top of the DOM tree. For example:
<body ng-controller='applicationController'>
...
<div class="ng-view"></div>
...
</body>
applicationController is always there, and can set up bindings on its scope when it is created.
How about putting that event listener on the root scope:
$rootScope.$on('$viewContentLoaded', setColumnHeight);
You could use something like this:
<div class="main-container" ng-view>
{{ setColumnHeight() }}
<!-- The below divs are constantly being
reloaded based on the current URL and it's associated view -->
<div class="left-col">
</div>
<div class="right-col">
</div>
</div>
and it will check the height every time a render is made, however, this seems to be a bit over processing.
The best approach would be to only update the height from both columns when the height of one of them changes. For that you could use DOM Mutation Observers, however they are not yet available on all browsers. If that's not a problem for you, check the mutation-summary lib.
If you are using jQuery you can also try this: https://github.com/jqui-dot-net/jQuery-mutate (examples here).