angularjs ui-router – how to build master state which is global across app

The approach you took in your plunker is close. @ben-schwartz’s solution demonstrates how you’d set defaults in your root state for the three essentially-static views. The thing missing in your plunker is that your child states still need to reference the top container view. .state(‘root’,{ url: ”, views: { ‘header’: { templateUrl: ‘header.html’, controller: ‘HeaderCtrl’ …

Read more

AngularJS: Is ng-click “a good practice”? Why is there no ng-{event} in AngularJS?

Why is this one of the core concepts of AngularJS, if most people say this is “bad”? Well, people who really like Unobtrusive JavaScript might say it is bad. Angularians (and those with a flex background) see value in the more declarative approach. “Angular is built around the belief that declarative code is better than …

Read more

angularjs – using {{}} binding inside ng-src but ng-src doesn’t load

Changing the ng-src value is actually very simple. Like this: <html ng-app> <head> <script src=””></script> </head> <body> <img ng-src=”{{img_url}}”> <button ng-click=”img_url=”””>Click</button> </body> </html> Here is a jsFiddle of a working example:

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; }

$watch not being triggered on array change

Try $watch(‘tasks.length’, …) or $watch(‘tasks’, function(…) { … }, true). By default, $watch does not check for object equality, but just for reference. So, $watch(‘tasks’, …) will always simply return the same array reference, which isn’t changing. Update: Angular v1.1.4 adds a $watchCollection() method to handle this case: Shallow watches the properties of an object …

Read more

AngularJS Filter Exact Match

This is now provided natively within the filter. You can just pass true to the filter to enable strict matching. <li ng-repeat=”movie in movieList | filter : filters : true”>{{ movie.title }}</li> Refereces

Angular ui-router: ui-views vs directives?

How about if you used Angular UI router’s inline views to point to directives? Let’s say you have a directive for a table that handles CRUD operations on user accounts. We’ll say the directive is named user-admin. Our routes file would look like: .state(‘users’, { url: “”, template: “<user-admin>” }); This would give you many …

Read more