There is no shortage of S.O. questions, blogs, and bug reports about Ionic's view-title not updating. Solutions range from using the ion-nav-title directive instead of view-title, or set cache: false in app.js!
Yet none of these hacks worked for me. More importantly, none of the solutions I could find addressed the root problem. I started commenting-out my view. There was only one element that was causing problems: the modal.
My modals are housed in a tag like this:
<script id="user-modal.html" type="text/ng-template">
Looking for anyone who's been following this issue on why a script tag could cause this type of bug.
Concretely, is there any way I can continue having modals and not lose the title functionality?
PS: Leaving the script in and taking-out the <ion-modal-view> does not fix.
Still interested in why this happens, but the solution to having it working modals AND a working title bar is this:
<ion-view view-title="Profile">
<ion-content class="dark-blue">
...
<script id="user-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-dark">
Modal...
</script>
</ion-content>
</ion-view>
You must have the script inside of the ion-view and ion-content. While the modal will work on the outside, it will cause the tile to behave unexpectedly. Explanations welcome!
Related
I am having a compatibility issue with Angular UI Bootstrap Modal and sightly Parameters. When I try to render the sightly parameters inside the Modal the modal does not render the value in the sightly parameters as:
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">${properties.something} </h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
${properties.something}
</div>
</script>
As far as I have observed, there is an issue with printing inside the script tag.
Can someone help me if they have got the same issue?
Modal that I am using is Angular UI Bootstrap verion : 2.3 : http://angular-ui.github.io/bootstrap/
First, you need to provide more context, where your HTML is located? your folder structure and what you are trying to achieve.
Second, Sightly happens on the back-end and Angular in the browser so you should not have incompatibility there, I think your problem is somewhere else.
By default, HTL/Sightly includes XSS protection. In this case, for ${properties.something} the implicit scriptToken context is used (https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#121-display-context) and probably cuts off the content (in case it has characters that are not allowed in that context).
You can probably set a more relaxed context: ${properties.something # context='html'}
I would like to use http://ionicframework.com/docs/api/directive/ionNavButtons/ as a way of adjusting what's shown in the header/nav bar based on the route where the elements shown in the header are set in the view.
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar>
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
I'm a button on the left of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
However when I try to use that code, the directive is undefined. It must separate from the ionic.js, which I'm including in the page. Is there a special way to add it as a directive or just copy the code from github (https://raw.githubusercontent.com/driftyco/ionic/master/js/angular/directive/navBar.js)? When I just include the directive, I get IonicModule is undefined in the console.
Well you'll need your main app module depending on the 'ionic' module. (i.e. in your index.html somewhere you have ng-app="myApp" - and then in a script somewhere you have angular.module('myApp', [/* dependencies */]); - you need to add 'ionic' to the dependencies.) Have you done this?
Also I'd just find a minified/complete version of the ionic files for javascript and angular; however if you just wanted that single directive, you minimally will need this, too, as that is where the IonicModule is defined. It looks like from your error message you haven't done this.
https://github.com/driftyco/ionic/blob/master/js/angular/main.js
If you can set up a plunker that will help (me help) even more.
My problem is, when Angular load templateUrl (through $routeProvider) inside ng-view it doesn't evaluate all javascript as well. I tried to figure it out, but now i'm really confused. During my search i found a lots of new topic, and i've lost in them. Any idea?
Tale
I tried to figure it out if anybody else met this problem before, or if there are any solution for this problem. The way i've found was something like "lazy-loading" directives or using requirejs, but i'm not sure if those tools are really solves this problems.
As Buu Nguyen mentioned in this thread
That's the way jqLite works. If you want scripts in templates to be
evaluated, include jQuery before AngularJS. If jQuery is included, the
script will be evaluated. Try removing jQuery, and you see the
originally observed behavior.
I've tried, including jquery before angularjs but doesn't cause any effect at all.
There are sevaral threads i read, for example
stack-overflow-19434249
stack-overflow-12197880
stack-overflow-21994037
but nothing lead to solution (maybe i've missed a thing). And i think, this is not even my problem. I don't want to (re)load javascript files, i just want to force evaluate my bootstrap.
Honestly i'm really confused now.
Afterward first time i met RequireJS. (lazy loading, and friends, again)
I've watched Thomas Burleson's video on youtube and i nearly understand what is it. And i looked much more articles in topic (because i found it's interest) but solution should be somewhere else.
Here is the situation
While i'm working on my angularjs app, i've made a partial site as separated .html file (just in case) and it seems pretty. Then i cut this .html file to pieces (header, top-menu, content, footer) and use its body tag as div inside a partial urlTemplate.
<body ng-app="myApp" id="page-top">
<div class="wrapper">
<div class="navigation">
<div top-menu></div>
</div>
<div ng-view></div>
<footer id="page-footer">
<div class="container">
<span>Copyright © 2014. All Rights Reserved.</span>
<span class="pull-right">Go to top</span>
</div>
</footer>
</div>
</body>
angular $routeprovider:
angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main/templates/main.html'
}).when('/ad-element', {
templateUrl: 'submit/templates/submit.html'
}).when('/404', {
templateUrl: 'errors/templates/404.html'
}).otherwise({
redirectTo: '/404'
});
}]);
submit.html
<div class="page-sub-page page-submit">
<div ng-controller="SubmitController" class="container">
<form ...></form>
</div>
</div>
Every angular function is working, the only visible difference is the appearance.
This is the good one:
And this is the bad one:
I've noticed a strange behavior of ng-include -- it is causing a strange side effect on the browser in some cases.
Here is a page, that contains a simple twitter bootstrap tab pane
<body>
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">AAA</div>
<div class="tab-pane" id="tab2">BBB</div>
</div>
</body>
Now, if I add ng-include anywhere in the page, for example at the beginning of the page:
<body>
<ng-include src="'page1.html'"></ng-include>
...
It doesn't matter what the included file contains, it can be even empty, but this will cause each click when switching tabs to add #/tab1, #/tab2, etc. to the page URL. This happens in all browsers, which is undesirable. On Chrome, this also causes the tab icon to flicker, and for a moment it shows default white icon before it reloads the page specific icon.
Anyone experienced something similar? Why adding ng-include would cause this?
I also tried doing the include without angular (by using jQuery.load()) and there is no issue seen.
This can be fully experienced on a standalone page, but on this plnkr page I created, although one cannot see the URL, and the flicker effect in Chrome is less visible, but still the effect can be seen in Chrome.
The url changing behavior come from the $location service, which is used by ng-include. So you could be able to reproduce it by just injecting the $location service somewhere in your app.
See the What does it do? section of this $location guide, and the action that causing the problem is:
Maintains synchronization between itself and the browser's URL when the user clicks on a link in the page
This answer your question "Why adding ng-include would cause this?".
To prevent the url from changing by the $location service, you could do it like this:
appModule.run(function ($rootScope) {
$rootScope.$on('$locationChangeStart', function ($event, newUrl, oldUrl) {
// may add some logic here to prevent url changes only that come from clicking tab.
$event.preventDefault();
});
})
Example plunker: http://plnkr.co/edit/4289uwL1mHSRj6oP4dl1?p=preview
Hope this helps.
Yesterday when I was using older version, everything worked fine. My code looked like this:
<div ng-repeat="widget in widgets" class="box" ng-include="widget.view"></div>
Today I updated to newer version and it seems that it doesn't work anymore. I tried different versions of how to use ng-include and this one below renders a comment where the content should be:
Comment:
<!-- ngInclude: widget.view -->
Code:
<div ng-repeat="widget in widgets" class="box">
<ng-include src="widget.view"></ng-include>
</div>
I've also tried moving views out of partials into script tags but it doesn't help. Before I moved to script tag there was SUCCESSFUL xhr request to partial, but it just didn't render it.
What could be wrong?
Edit: if I change version back without any code modification, everything works again.
Possibly it's this issue https://github.com/angular/angular.js/issues/3627 foo bar foo bar