I am making a carousel with angular-slick (https://github.com/vasyabigi/angular-slick).
Some of the slick settings for the carousel do not seem to work when used as attributes of the slick-directive. These attributes all have one or more capital case letters.
I had to change these attributes to lower case letters in slick.js and in the angular model for slick.js. For instance to get a custom button for next and previous I had to change prevArrow and NextArrow to prevarrow and nextarrow so i can use it in the following way:
<slick prevarrow='.btn-prev' nextarrow='.btn-next' arrows="true" data="windows">
<div ng-repeat="window in windows" class="slick-slide">
<a><img ng-src={{window.imageUrls[0]}}></a>
</div>
</slick>
<div class="slider-controls">
<button class="btn-next">customNext</button>
<button class="btn-prev">customPrev</button>
</div>
Changing the code in the libraries does not seem the right way to get it working. Is there some obvious mistake I made or is this just a limitation to the slick-settings one can use via the slick element ?
When you see directives with capital case like nextArrow, you must use them as
next-arrow
No need to change the library code. Angular follows same convention as CSS. When there is a capital cased directive prevArrow, in your HTML if you want to reference it, use prev-arrow.
Best example for it is:
ng-app
In your HTML you might have used it as ng-app but if you check it in the angular code, it will be ngApp
Related
I have a template popup being loaded in via a controller function. Is there a way I can fade in the template. I have tried adding a separate class, hooking it to the ng-show class.
HTML:
<div class="contact-form">
<div ng-include="contactTemplate" class="fade"></div>
</div>
JS:
$scope.contactForm = function() {
$scope.contactTemplate = 'sections/popups/contact.html';
};
You could use ngAnimate and add simple css animations (there are a lot of good tutorials out there).
The available animations can be found in the ngInclude docs at "Animations".
PS: To nicely format code blocks insert a linebreak and indent code by four spaces
I'm trying to add a class when hovering the li element in the code below with Angular
<li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}">
<a href="interna.html">
<img src="assets/images/cola.png">
</a>
</li>
This is all the functionality the page will have, so I though maybe it is not necessarily to add a new js file for the js.
When the mouse enter to the li it should have the new class selected. The code above it is not working, and I cannot figure out why.
Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/
Why do you need an extra file if you can write the logic in your angular application?
I assume you make use of ng-app and have a so called javascript file where your logic is, and you should include it in here.
Here is an example of the proper way of adding/removing a class.
<div ng-app>
<div
class="italic"
ng-class="{red: hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
Test 1 2 3.
</div>
</div>
NB I found this in another stackoverflow question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.
* EDIT *
It seems like you're not yet familiar with AngularJS. You need to include your 'app.js' or 'script.js' whatever you want to call it. In there you define your application using
var app = angular.module('yourappname', [/* add your dependencies here*/]);
//Other logic like controllers or services
And your HTML should be
<div ng-app="yourappname">
<div ng-controller="yourController">
PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS
Try using ng-mouseover attr
<li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}">
write a function hoverIn() in your script and assign value when hover over
$scope.hoverIn = function() {
this.applyClass = "red";
}
Working Demo
In Angular Phone cat application (step-10), I am not able to use element(by.binding('bindingName')) Protractor locators
Tutorial link: Angular phone cat app (step-10, test)
Details:
// Working
expect(element(by.css('img.phone')).getAttribute('src'))
.toMatch(/img\/phones\/nexus-s.0.jpg/);
// Not Working
expect(element(by.binding('mainImageUrl')).getAttribute('src'))
.toMatch(/img\/phones\/nexus-s.0.jpg/);
<img ng-src="{{mainImageUrl}}" class="phone">
by.binding would not work in this case by definition.
According to the source code, it would only match an element if, at least, there is a ng-binding class on an element.
I'd like to qualify alecxe's answer just a little. Any {{ }} expressions work, as long as it's not part of an attribute
For example:
<p class="phone">{{someText}}</p>
can be found via:
element(by.binding('someText'))
In other words, your template does not need to contain the ng-binding class, as it's generated automatically by Angular. That being said, there is a bug currently where if the binding is part of an attribute or attribute-value, the ng-binding class is not generated by Angular and Protractor will not be able to locate the element.
This is my problem too and I can not find any protractor feature to solve that so this is my suggest solution. :)
This solution bases on protractor can get element by ng-bind and get value attribute of input. (I have no idea why getText() input not work :D)
..
<img ng-src="{{mainImageUrl}}" class="phone">
<input type="hidden" ng-bind="mainImageUrl" value="{{mainImageUrl}}">
..
in javascript:
element(by.binding('mainImageUrl')).getAttribute('value')
.then(function(text){
expect(text.toMatch(/img\/phones\/nexus-s.0.jpg/));
});
I have an element which has static CSS classes and dynamic classes which will be determined by a method, so how do I put them together?
I tried below code, but it does not work:
<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>
So as a workaround I did this:
<div ng-class="{'static-class': true, 'dynamic-class': isEnabled()}"></div>
But this is ugly, especially when there are many static classes.
EDIT
I found my first example works! Sorry for for this question.
Your first example should work:
<div class="static-class" ng-class="{'dynamic-class': isEnabled()}"></div>
Alternatively you can also use:
<div class="static-class ng-class: {'dynamic-class': isEnabled()};"></div>
bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})
Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.
I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})