Newbe Dev Stack

Answer : passing text is one-way binding(@) and passing object is two-way binding(=) passing object as text <custom-directive config="{{config}}"></custom-directive> scope in directive scope: { config: "@" } converting the string back to object in link var config = angular.fromJson(scope.config); You are correct, the issue is that your JavaScript objects are being passed by reference. Using a one-way binding copies the reference, but the reference will still point to the same object. My impression from the Angular docs for directives has always been: The '@' binding is intended for interpolated strings The '=' binding is intended for structured data that should be shared between scopes The '&' binding is intended for repeatedly executing an expression that is bound to the parent scope If you want to treat the bound object from the parent as immutable, you can create a deep copy the objects inside y...

Answer : $window.pageYOffset This is property from service $window I don't believe there's anything in Angular to get the scroll position. Just use plain vanilla JS. You can retrieve the scrollTop property on any element. https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop document.body.scrollTop Fiddle for you: http://jsfiddle.net/cdwgsbq5/ Inject the $window into your controller and you can get the scroll position on scroll var windowEl = angular.element($window); var handler = function() { console.log(windowEl.scrollTop()) } windowEl.on('scroll', handler); Fiddle Adaptation from another stackoverflow answer

Answer : Here's a re-usable directive in the style of angular's inbuilt event handling directives: angular.module('sbLoad', []) .directive('sbLoad', ['$parse', function ($parse) { return { restrict: 'A', link: function (scope, elem, attrs) { var fn = $parse(attrs.sbLoad); elem.on('load', function (event) { scope.$apply(function() { fn(scope, { $event: event }); }); }); } }; }]); When the img load event is fired the expression in the sb-load attribute is evaluated in the current scope along with the load event, passed in as $event. Here's how to use it: HTML <div ng-controller="MyCtrl"> <img sb-load="onImgLoad($event)"> </div> JS .controller("MyCtrl", function($scope){ // ... $scope.onImgLoad = function (event) { // ... } Note: "sb" is just the prefix I...

Answer : After my initial struggle with the link and controller functions and reading quite a lot about them, I think now I have the answer. First lets understand , How do angular directives work in a nutshell: We begin with a template (as a string or loaded to a string) var templateString = '<div my-directive>{{5 + 10}}</div>'; Now, this templateString is wrapped as an angular element var el = angular.element(templateString); With el , now we compile it with $compile to get back the link function. var l = $compile(el) Here is what happens, $compile walks through the whole template and collects all the directives that it recognizes. All the directives that are discovered are compiled recursively and their link functions are collected. Then, all the link functions are wrapped in a new link function and returned as l . Finally, we provide scope function to this l (link) function which further executes the wrapped link functions ...

Answer : Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you: angular.module('directive.loading', []) .directive('loading', ['$http' ,function ($http) { return { restrict: 'A', link: function (scope, elm, attrs) { scope.isLoading = function () { return $http.pendingRequests.length > 0; }; scope.$watch(scope.isLoading, function (v) { if(v){ elm.show(); }else{ elm.hide(); } }); } }; }]); With this directive, all you need to do is to give any loading animation element an 'loading' attribute: <div class="loading-spiner-holder" data-loading ><div class="loa...