I currently building a mobile hybrid application using Material Design Lite but I've encountered a slight issue. When I'm adding input field elements to my pages, the floating text or even the placeholder does not work correctly.
I'm using $stateProvider and $urlRouterProvider in my application for page navigation. Inside my index.html I have <div ui-view></div> in which I inject my views when my states change using <a ui-sref="home">Home</a> for example.
The problem I'm having is that if insert the following code into index.html outside of the ui-view of course:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
The floating label works no problem. However, if I place the same code inside a view (external page that is later injected inside the ui-view element after page navigation occurs), the floating label does not work correctly. The label does not float up, and the text entered is unreadable.
There are no errors displayed in my console and I can't seem to figure out why it won't work. The JS files and CSS are loaded in correctly.
Hopefully someone can help me out with this.
Thanks everyone!
You have to upgrade the elements using "componentHandler.upgradeElements()"
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 am working on a angular material application. i have a page where i need to list number of languages. i am using md-grid-list instead of conventional ul and li.
However when the page loads/refreshes the list gets overlapped for a fraction of second before it gets displayed properly.
Code
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
it would be great if anyone can share a solution for this.
Try to put ng-cloack as an attribute of the "md-grid-list".
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
The order in which you are loading your css,js dependencies could be causing this problem.
If you can move your material library dependency closer to the initial loading of the page, it may fix this. You could test this by putting jquery and material libraries inside your html head as one of your first dependencies to load. These dependencies being global to your app or just on your component can also cause this to happen. Again, you can test that with the previously mentioned approach.
I have also fixed a flavor of this problem naturally by using *ngIf in a div container wrapper around my html and that seemed to allow the dependencies for the site to load prior to showing any content. I would still try rearranging my dependencies, though.
I'm new on Angular JS + Bootstrap 3 and I'm trying to do something for maps. the thing is that I need to open a modal, and then from a button of that modal open another modal.
This is the external html:
<div class="modal-header">
<h1>Editor<h1>
</div>
<div class="modal-body" >
<button class="btn btn-primary" ng-click="treureModalEdit()" data-dismiss="modal">Afegir Punt</button>
</div>`
Here is my example: http://plnkr.co/edit/Zx68EQ?p=info
If something does not load is because libraries, but i only need help where the button 'Posa Marcador!' is.
Some code is in catalan, sorry if that discourages you to help me.
Thank you!
If you inspect with your browser's developer tools the first modal that you open you will see that the markup for this modal is appended to the end of your HTML body, which means that the modal is not nested in your <div ng-controller="DialogDemoCtrl">. This in turn means that the modal does not have a controller of its own, and therefore cannot "understand" the ng-click="treureModalEdit()" you have defined for your button.
In order to fix this problem you should create a second controller and use it for your modal. The treureModalEdit() would then be placed into that second controller.
A few other comments I have on your code:
You use things like data-toggle="modal" data-target="#modalEdit", however this is how you would be opening your modal if you did not have an Angular application. In your Angular application what you actually use is the ng-click="func()" you have put on the button. You can therefore clean all this dead code from your HTML (data attributes and modal template).
If you are new to Angular I would suggest using a newer version in order to avoid any problems which might be fixed in newer versions. You can use the latest version (1.4.0) or a 1.2.x version is you need to support IE8 (which is not officially supported since Angular version 1.3.x.
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.
I'm using Angular JS and Angular IU-Router in my project and using a lot of ui-views. I have a situation where I need to change the language of the site, therefore I need to swap my ui-view's model to another model with the relevant language. I already have a service that detects the relevant model and passes it into the ui-view's controller. So if I can reload the ui-view, then in theory my problem would be solved.
I recall reading something about automatically reloading a ui-view (or possibly an ng-view) and re-instantiating its controller, but after much searching I haven't been able to find that information again.
Does anyone know what it is I'm looking for?
1 Take a look at angular-translate
https://github.com/PascalPrecht/angular-translate
2 In your case, add some if-else control ( ng-if, ng-switch etc. ) in the outer div, use the same subview in the inner div. Then change the settings.currentLang when the language changes may cause the subview reload (not tested).
<div ng-controller="containerCtrl">
<div ng-if="settings.currentLang=='en'">
<div ui-view='subview'></div>
</div>
<div ng-if="settings.currentLang=='ja'">
<div ui-view='subview'></div>
</div>
</div>