How do i use $on in a service in angular?

after experimenting a fair bit it turns out that getting events to the service can be done with minimal code. sample service code follows in case anyone else runs into this. The sample saves and restores the service model to local storage when it gets the respective broadcasts app.factory(‘userService’, [‘$rootScope’, function ($rootScope) { var service … Read more

What is ‘cheaper’ performance-wise $broadcast or $watch

$watch() is doing dirt-checking: the function makes a comparison each digest cycle. On the other hand, $broadcast() propagates an event only when there is one. Naturally, $broadcast() is cheaper than $watch(). But did you really have to worry about performance here? One primitive comparison by cycle is nothing. However, conceptually, $watch() is clearly what you … Read more

Angularjs: a Service that serves multiple $resource urls / data sources?

You can update service to return a hash of resources, not a single one: angular.module(‘myApp.services’, [‘ngResource’]). factory(“geoProvider”, function($resource) { return { states: $resource(‘../data/states.json’, {}, { query: { method: ‘GET’, params: {}, isArray: false } }), countries: $resource(‘../data/countries.json’, {}, { query: { method: ‘GET’, params: {}, isArray: false } }) }; }); You will be able … Read more

AngularJS $watch vs $watchCollection: which is better for performance?

$watch() will be triggered by: $scope.myArray = []; $scope.myArray = null; $scope.myArray = someOtherArray; $watchCollection() will be triggered by everything above AND: $scope.myArray.push({}); // add element $scope.myArray.splice(0, 1); // remove element $scope.myArray[0] = {}; // assign index to different value $watch(…, true) will be triggered by EVERYTHING above AND: $scope.myArray[0].someProperty = “someValue”; JUST ONE MORE … Read more

Enable/Disable Anchor Tags using AngularJS

Update: Disabling the href works better in the link function return. Code below has been updated. aDisabled naturally executes before ngClick because directives are sorted in alphabetical order. When aDisabled is renamed to tagDisabled, the directive does not work. To “disable” the “a” tag, I’d want the following things: href links not to be followed … Read more

validate natural input number with ngpattern

The problem is that your REGX pattern will only match the input “0-9”. To meet your requirement (0-9999999), you should rewrite your regx pattern: ng-pattern=”/^[0-9]{1,7}$/” My example: HTML: <div ng-app ng-controller=”formCtrl”> <form name=”myForm” ng-submit=”onSubmit()”> <input type=”number” ng-model=”price” name=”price_field” ng-pattern=”/^[0-9]{1,7}$/” required> <span ng-show=”myForm.price_field.$error.pattern”>Not a valid number!</span> <span ng-show=”myForm.price_field.$error.required”>This field is required!</span> <input type=”submit” value=”submit”/> </form> </div> … Read more

Highlighting a filtered result in AngularJS

In did that for AngularJS v1.2+ HTML: <span ng-bind-html=”highlight(textToSearchThrough, searchText)”></span> JS: $scope.highlight = function(text, search) { if (!search) { return $sce.trustAsHtml(text); } return $sce.trustAsHtml(text.replace(new RegExp(search, ‘gi’), ‘<span class=”highlightedText”>$&</span>’)); }; CSS: .highlightedText { background: yellow; }

Making an angular filter conditional

You can achieve this if you set the filter expression to ” (or undefined) – this causes the filter not to be applied – for when your disableFilter is set, or to the actual filter expression otherwise. EDIT 2: The other answer (below by @Ryan) is simpler and easier to understand. Can’t remember now whether … Read more