I created a workaround with directive: .directive(“fileread”, [function () { return { scope: { fileread: “=” }, link: function (scope, element, attributes) { element.bind(“change”, function (changeEvent) { var reader = new FileReader(); reader.onload = function (loadEvent) { scope.$apply(function () { scope.fileread = loadEvent.target.result; }); } reader.readAsDataURL(changeEvent.target.files[0]); }); } } }]); And the input tag becomes: … Read more
Decision tree between ES5, ES6 and TypeScript Do you mind having a build step? Yes – Use ES5 No – keep going Do you want to use types? Yes – Use TypeScript No – Use ES6 More Details ES5 is the JavaScript you know and use in the browser today it is what it is … 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>
EDIT: This answer is old and likely out of date. Just a heads up so it doesn’t lead folks astray. I no longer use Angular so I’m not in a good position to make improvements. It’s actually pretty good logic but you can simplify things a bit. Directive var app = angular.module(‘plunker’, []); app.controller(‘MainCtrl’, function($scope) … Read more
I think that you are looking for the ngCloak directive: https://docs.angularjs.org/api/ng/directive/ngCloak From the documentation: The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html … Read more
Explanation You got different things here: First: If you use a service you will get the instance of a function (“this” keyword). If you use a factory you will get the value that is returned by invoking the function reference (the return statement in factory). ref: angular.service vs angular.factory Second: Keep in mind all providers … Read more
If you want to use isolated scopes you can pass a control object using bi-directional binding = of a variable from the controller scope. You can also control also several instances of the same directive on a page with the same control object. angular.module(‘directiveControlDemo’, []) .controller(‘MainCtrl’, function($scope) { $scope.focusinControl = {}; }) .directive(‘focusin’, function factory() … Read more
Angular adds this to keep track of your changes, so it knows when it needs to update the DOM. If you use angular.toJson(obj) instead of JSON.stringify(obj) then Angular will strip out these internal-use values for you. Also, if you change your repeat expression to use the track by {uniqueProperty} suffix, Angular won’t have to add … Read more
I am using the following to conditionally set the class attr when ng-class can’t be used (for example when styling SVG): ng-attr-class=”{{someBoolean && ‘class-when-true’ || ‘class-when-false’ }}” The same approach should work for other attribute types. (I think you need to be on latest unstable Angular to use ng-attr-, I’m currently on 1.1.4)
For Angular 1.0 you should use the $interpolateProvider apis to configure the interpolation symbols: http://docs.angularjs.org/api/ng.$interpolateProvider. Something like this should do the trick: myModule.config(function($interpolateProvider) { $interpolateProvider.startSymbol(‘{[{‘); $interpolateProvider.endSymbol(‘}]}’); }); Keep in mind two things: mixing server-side and client-side templates is rarely a good idea and should be used with caution. The main issues are: maintainability (hard to … Read more