What's the best way to create a dynamic slideshow using angular 1.3? I would like to build one, I was trying with http://jquery.malsup.com/cycle2/ but it doesn't work when use angular.js at the same page.
<div ng-repeat="diaporama in diaporamas" class="cycle-slideshow">
<img class="diaporama-img" src='{{diaporama.photo_file_name | image_diaporama_path_format: diaporama.id}}'/>
</div>
<script>
$(".cycle-slideshow").cycle();
</script>
I believe in order to achieve what you desire you'll be looking to create a directive for that purpose.
A good start would be referring to angulars documentation on directives.
Hope that helps!
Related
I'm trying to include some HTML on my software's webpage using ng-include, and I can't seem to get it to work. For now, I am using simplified versions of my end goals for testing purposes.
Relevant snippet of my project tree:
-web
--dragonweb
---src
----app
-----dragon
-------dragon.css
-------dragon.html
-------dragon.spec.ts
-------dragon.ts
-------test.html
dragon.html
<div ng-app = "" ng-controller="test">
testing
<div ng-include="" src="'app/src/dragon/test.html'"></div>
</div>
test.html
<div>
This is an included file
</div>
Expected output on the web page:
testing
This is an included file.
Actual output on the web page:
testing
I've tried using different lengths of the path to test.html, with no luck. I've also been playing around with the use of the ng-controller tag, and syntax for the ng-include tag, with no luck. There are no console errors in the web page. Any idea why it doesn't seem to be working?
Backstory/disclaimer: I was the intern on this project before inheriting it after the lead dev suddenly left, this is my first time doing any sort of web development, and I'm just learning on the job from trial and error. So if I'm doing things wildly incorrect, I am absolutely all ears for how I can improve this process! I chose to try to use ng-include because we already have Angular implemented, and based on my research this seemed like the theoretically easiest way to accomplish what I wanted.
You need to pass the src to ng-include directive not the src attribute:
Ex:
<div ng-include="'app/src/dragon/test.html'"></div>
or use relative path:
<div ng-include="'./test.html'"></div>
Please check out the official documentation for details
Usage:
as element:
<ng-include
src="'string_url'">
...
</ng-include>
as attribute:
<ANY_ELEMENT_TAG
ng-include="'string_url'">
...
</ANY_ELEMENT_TAG>
as CSS class:
<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>
Whatever i do ng-click of AngularJS in paper-button within polymer-element it doesn't work, is there any file to import? please tell me step by step what should i do.
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html"/>
<link rel="import" href="../components/core-signals/core-signals.html">
<polymer-element name="my-statut-footer_OnEdit">
<template>
<div class="tag-container">
<paper-button class="shadow" ng-click='annulerClick()'>Annuler</paper-button>
<paper-button class="colored shadow" ng-click='publierClick()'>Publier</paper-button>
</div>
</template>
<script>
Polymer('my-statut-footer_OnEdit',{
});
</script>
</polymer-element>
The best solution that I've found is to use polymer's on-click event, then inside the method select the angularjs controller by his id
<paper-button on-click='publierClick()'>Publier</paper-button>
Polymer('my-statut-footer_OnEdit',{
publierClick: function(e, detail, sender) {
var scope = angular.element(document.getElementById(('controllerID')))
.scope();
scope.$apply(function () {
scope.publier();
});
}
});
Polymer and Angular are not compatible with each other.
Polymer makes extensive use of the brand new Web Components standards which Angular know literally nothing about so when Angular's Compiler comes across a Custom Element it tries to use it as a Angular Directive which it is actually not so it throws lot of errors.
Here are a few Solution:
Use ng-polymer-elements which helps Polymer elements be compatible with Angular.
Wait for Polymer 0.8 and hope it goes along with Angular.
While you are here please make sure to view some answers for the Following question this might help you understand some technical differences between polymer and angular:
What is the difference between Polymer elements and AngularJS directives?
For now there is no efficient way to achieve it. I used Iframe to make it working. Hope will find better solution, but for now angular can't work efficient with shadow html generated by polymer.
I am using angularjs from 2 months but never comes to problem like this, so thought of sharing with you people and getting some good suggestion on that. Here I am trying to apply ul/nav-group element dynamic values. Everything is working fine means, if I see developer tools on browser it gets value and everything, but not the +/- sign. I search on google its saying that it loads after DOM creation so it is not showing that. But no buddy tells the solution for that.
Consider my code:
<nav:group ng-repeat="parentChild in parentChildList" title="{{parentChild.filterText}}">
<nav:item data-view="/ui/icons/fa" ng-repeat="childs in parentChild.childList" data-icon="fa fa-lg fa-fw fa-plane" title="{{childs.filterText}}" />
</nav:group>
The value for particular fields are straight forward means its simple list.How the directive can solve this problem.
Appreciate any suggestions . Thanks.
Add an ng-cloak directive on the body tag of your app to prevent loading the element until angular has finished loading.
Your body tag would look like this:
<body ng-cloak>
...
</body>
You could also fix this by using promises in your services, that is definitely the best practice regardless, but ng-cloak is a quick and easy fix.
Hope that helps! If ng-cloak doesnt work for you post snippets of your controller and service and I will help you add promises.
Good Luck!
-Justin
What is the recommended way to quickly inspect the values on my html section of my jsfiddle examples?
Is there a more efficient practice than using the {{}} or filtering to json?
<div ng-app="myApp" ng-controller="MainCtrl">
<div
ng-init="index=0; classes=['red', 'yellow', 'green']"
ng-click="index = index + 1"
ng-class="classes[index % classes.length]">Click to change traffic color</div>
Index = {{index}};
Length = {{classes.length}}
Style= {{classes[index % classes.length]}}
</div>
I just want something simple to look at tiny examples like this one:
Another example
EDIT: This is a more advanced technique on how to build an implementation of AngularJS from the ground up. I cant think of a better way to really learn and understand Angular if you have the patience,time and know how.
There's an official Chrome extension for inspecting AngularJS apps. It lets you view $scope variables, dependency graphs, performance, and more.
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
I'm trying to remove jquery from my Angular.js app in order to make it lighter, and put Angular's jqLite instead. But the app makes heavy use of find('#id') and find ('.classname'), which are not supported by jqLite, only 'tag names' (as per documentation)
wondered what do u feel would be the best approach to change it. One approach I thought about is to create custom HTML tags. for example:
change
<span class="btn btn-large" id="add-to-bag">Add to bag</span>
to
<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>
and
$element.find('#add-to-bag')
to
$element.find('a2b')
Any thoughts? other ideas?
thanks
Lior
Essentially, and as-noted by #kevin-b:
// find('#id')
angular.element(document.querySelector('#id'))
//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))
Note: If you're looking to do this from your controllers you may want to have a look at the "Using Controllers Correctly" section in the developers guide and refactor your presentation logic into appropriate directives (such as <a2b ...>).
angualr uses the lighter version of jquery called as jqlite which means it doesnt have all the features of jQuery. here is a reference in angularjs docs about what you can use from jquery.
Angular Element docs
In your case you need to find a div with ID or class name.
for class name you can use
var elems =$element.find('div') //returns all the div's in the $elements
angular.forEach(elems,function(v,k)){
if(angular.element(v).hasClass('class-name')){
console.log(angular.element(v));
}}
or you can use much simpler way by query selector
angular.element(document.querySelector('#id'))
angular.element(elem.querySelector('.classname'))
it is not as flexible as jQuery but what
If elem.find() is not working for you, check that you are including JQuery script before angular script....