The reason you can’t access the input is because the Foundation tab (or ng-repeat?) creates an isolate scope. One way to address this is using the controller as syntax: <div ng-controller=”MyController as ctrl”> <!– an example of a directive that would create an isolate scope –> <div ng-if=”true”> <form name=”ctrl.myForm”> …inputs Dirty? {{ctrl.myForm.$dirty}} <button ng-click=”ctrl.saveChanges()”>Save</button> … Read more
Promises are an abstraction over statements that allow us to express ourselves synchronously with asynchronous code. They represent a execution of a one time task. They also provide exception handling, just like normal code, you can return from a promise or you can throw. What you’d want in synchronous code is: try{ try{ var res … Read more
Use nested inline if-then statements (Ternary Operators) <div ng-class=” … ? ‘class-1’ : ( … ? ‘class-2’ : ‘class-3’)”> for example : <div ng-class=”apt.name.length >= 15 ? ‘col-md-12’ : (apt.name.length >= 10 ? ‘col-md-6’ : ‘col-md-4′)”> … </div> And make sure it’s readable by your colleagues 🙂
Your fiddles create three scopes: a scope associated with controller Ctrl, because of ng-controller a directive transcluded scope, because of transclude: true a directive isolate scope, because of scope: { … } In fiddle1, before we type anything into the text box we have the following: Scope 003 is the scope associated with the controller. … Read more
Simply you can use $state.transitionTo instead of $state.go . $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true } . You can call $state.transitionTo and set notify: false . For example: $state.go(‘.detail’, {id: newId}) can be replaced by $state.transitionTo(‘.detail’, {id: newId}, { location: true, inherit: true, … Read more
simple example: <div ng-style=”isTrue && {‘background-color’:’green’} || {‘background-color’: ‘blue’}” style=”width:200px;height:100px;border:1px solid gray;”></div> {‘background-color’:’green’} RETURN true OR the same result: <div ng-style=”isTrue && {‘background-color’:’green’}” style=”width:200px;height:100px;border:1px solid gray;background-color: blue”></div> other conditional possibility: <div ng-style=”count === 0 && {‘background-color’:’green’} || count === 1 && {‘background-color’:’yellow’}” style=”width:200px;height:100px;border:1px solid gray;background-color: blue”></div>
Instead of setting the ng-model to item.size.code, how about setting it to size: <select ng-options=”size as size.name for size in sizes” ng-model=”item” ng-change=”update()”></select> Then in your update() method, $scope.item will be set to the currently selected item. And whatever code needed item.size.code, can get that property via $scope.item.code. Fiddle. Update based on more info in … Read more
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){ … Read more
(You may need to change body to html or wherever you put your ng-app) (function () { var root = angular.element(document.getElementsByTagName(‘body’)); var watchers = []; var f = function (element) { angular.forEach([‘$scope’, ‘$isolateScope’], function (scopeProperty) { if (element.data() && element.data().hasOwnProperty(scopeProperty)) { angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) { watchers.push(watcher); }); } }); angular.forEach(element.children(), function (childElement) { f(angular.element(childElement)); }); … Read more
$eval and $parse don’t evaluate JavaScript; they evaluate AngularJS expressions. The linked documentation explains the differences between expressions and JavaScript. Q: What exactly is $eval doing? Why does it need its own mini parsing language? From the docs: Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. Expressions … Read more