angularjs-directive

AngularJS ng-style with a conditional expression

by

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>

How to call a method defined in an AngularJS directive?

by

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

What is the best way to conditionally apply attributes in AngularJS?

by

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)

How to set bootstrap navbar active class with Angular JS?

by

A very elegant way is to use ng-controller to run a single controller outside of the ng-view: <div class=”collapse navbar-collapse” ng-controller=”HeaderController”> <ul class=”nav navbar-nav”> <li ng-class=”{ active: isActive(“https://stackoverflow.com/”)}”><a href=”https://stackoverflow.com/”>Home</a></li> <li ng-class=”{ active: isActive(‘/dogs’)}”><a href=”http://stackoverflow.com/dogs”>Dogs</a></li> <li ng-class=”{ active: isActive(‘/cats’)}”><a href=”http://stackoverflow.com/cats”>Cats</a></li> </ul> </div> <div ng-view></div> and include in controllers.js: function HeaderController($scope, $location) { $scope.isActive = function (viewLocation) … Read more

How to access parent scope from within a custom directive *with own scope* in AngularJS?

by

See What are the nuances of scope prototypal / prototypical inheritance in AngularJS? To summarize: the way a directive accesses its parent ($parent) scope depends on the type of scope the directive creates: default (scope: false) – the directive does not create a new scope, so there is no inheritance here. The directive’s scope is … Read more

How to use a keypress event in AngularJS?

by

You need to add a directive, like this: Javascript: app.directive(‘myEnter’, function () { return function (scope, element, attrs) { element.bind(“keydown keypress”, function (event) { if(event.which === 13) { scope.$apply(function (){ scope.$eval(attrs.myEnter); }); event.preventDefault(); } }); }; }); HTML: <div ng-app=”” ng-controller=”MainCtrl”> <input type=”text” my-enter=”doSomething()”> </div>

Angular directives – when and how to use compile, controller, pre-link and post-link [closed]

by

In which order the directive functions are executed? For a single directive Based on the following plunk, consider the following HTML markup: <body> <div log=’some-div’></div> </body> With the following directive declaration: myApp.directive(‘log’, function() { return { controller: function( $scope, $element, $attrs, $transclude ) { console.log( $attrs.log + ‘ (controller)’ ); }, compile: function compile( tElement, … Read more

How to set focus on input field?

by

When a Modal is opened, set focus on a predefined <input> inside this Modal. Define a directive and have it $watch a property/trigger so it knows when to focus the element: Name: <input type=”text” focus-me=”shouldBeOpen”> app.directive(‘focusMe’, [‘$timeout’, ‘$parse’, function ($timeout, $parse) { return { //scope: true, // optionally create a child scope link: function (scope, … Read more