Vladimir catindev

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

Raw Attribute Strings

<div my-directive="some string" another-param="another string"></div>

	// Source: https://groups.google.com/forum/#!topic/angular/hVrkvaHGOfc
	// jsFiddle: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/
	// author: Pawel Kozlowski

	var myApp = angular.module('myApp', []);

	//service style, probably the simplest one
	myApp.service('helloWorldFromService', function() {
	this.sayHello = function() {
	return "Hello, World!"

	/*
	Element to slide gets the following CSS:
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s ease 0s;
	*/

	/**
	* Like jQuery's slideDown function - uses CSS3 transitions

	/**
	* IE 5.5+, Firefox, Opera, Chrome, Safari XHR object
	*
	* @param string url
	* @param object callback
	* @param mixed data
	* @param null x
	*/
	function ajax(url, callback, data, x) {
	try {


	<html>
	<head>
	<title>Test</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://fb.me/react-0.5.1.js"></script>
	<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
	</head>

	app.factory('API', function($http, $q){

	var basePath = 'http://domain.com/api/path';
	// => http://domain.com/api/path/foo/bar

	function makeRequest(verb, uri, data){
	var defer = $q.defer();
	verb = verb.toLowerCase();

	//start with the uri

	Dynamic includes with Angular.js

	In a previous post I show how to use includes to partition views.

	In that example, I was using static includes that provide limited flexibility.

	What if you want to display different information on the same area of the template based on some condition?

	You could use a conditional statement inside the include and render different code accordingly, but doing that will most likely result in bloated and difficult to maintain views.

	/**
	* A mixin which helps you to add depth to elements according to the Google Material Design spec:
	* http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
	*
	* Please note that the values given in the specification cannot be used as is. To create the same visual experience
	* the blur parameter has to be doubled.
	*
	* Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)
	*
	* Example usage:

	function getWatchers(root) {
	root = angular.element(root \|\| document.documentElement);
	var watcherCount = 0;

	function getElemWatchers(element) {
	var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
	var scopeWatchers = getWatchersFromScope(element.data().$scope);
	var watchers = scopeWatchers.concat(isolateWatchers);
	angular.forEach(element.children(), function (childElement) {
	watchers = watchers.concat(getElemWatchers(angular.element(childElement)));

	/**
	* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
	*
	* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
	* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
	* the height of element `.foo` —which is a full width and height cover image.
	*
	* iOS Resolution Quick Reference: http://www.iosres.com/
	*/