angularjs-directive

Getting form controls from FormController

by

For a direct solution to the question, modify @lombardo’s answer like so; var dirtyFormControls = []; var myForm = $scope.myForm; angular.forEach(myForm, function(value, key) { if (typeof value === ‘object’ && value.hasOwnProperty(‘$modelValue’) && value.$dirty) dirtyFormControls.push(value) }); The array ‘dirtyFormControls’ will then contain the form controls that are dirty. You can also use this trick to show … Read more

How to bind boolean values in angular directives?

by

You can configure your own 1-way databinding behavior for booleans like this: link: function(scope, element, attrs) { attrs.$observe(‘collapsable’, function() { scope.collapsable = scope.$eval(attrs.collabsable); }); } Using $observe here means that your “watch” is only affected by the attribute changing and won’t be affected if you were to directly change the $scope.collapsable inside of your directive.

Displaying different content within a single view based on the user’s role

by

The solution is in this fiddle: http://jsfiddle.net/BmQuY/3/ var app = angular.module(‘myApp’, []); app.service(‘authService’, function(){ var user = {}; user.role=”guest”; return{ getUser: function(){ return user; }, generateRoleData: function(){ /* this is resolved before the router loads the view and model. It needs to return a promise. */ /* … */ } } }); app.directive(‘restrict’, function(authService){ return{ … Read more

Why is ngModel.$setViewValue(…) not working from

by

The reason is that since you’re creating an isolated scope for your contenteditable directive, the ng-model directive on the same element gets that isolated scope as well. Which means that you have two different scopes that aren’t connected to each other, which both have a form.userContent property that changes separately. I guess you could exemplify … Read more

Wait for data in controller before link function is run in AngularJS directive

by

The easiest solution would be to use ng-if since the element and directive would be rendered only when the ng-if is resolved as true <my-map id=”map-canvas” class=”map-canvas” ng-if=”dataHasLoaded”></my-map> app.controller(‘MyCtrl’, function($scope, service){ $scope.dataHasLoaded = false; service.loadData().then( function (data) { //doSomethingAmazing $scope.dataHasLoaded = true } ) }) or use promises return { restrict: ‘AE’, template: ‘<div></div>’, replace: … Read more

How to set the dynamic controller for directives?

by

Now it is possible with AngularJS. In directive you just add two new property called controller , name property and also isolate scope is exactly needed here. Important to note in directive scope:{}, //isolate scope controller : “@”, // @ symbol name:”controllerName”, // controller names property points to controller. Working Demo for Setting Dynamic controller … Read more

Question Mark in Directive Require

by

It’s exactly what you guessed: ? makes a directive optional. Basically, these are at your disposal when defining directive requirements: someDirective : Require someDirective on same element and pass it to linking function ?someDirective : Pass someDirective controller if available on same element to linking function. If not, pass null. ^someDirective : Require someDirective on … Read more

console.log Angular directive scope outputs “[object Object] No Properties”

by

The + operator calls to the toString method of the object which would return ‘[object object]’ So using log like this: console.log(‘scope is ‘ + scope); Produced the string scope is [object object] Instead use the console.log() method with commas (as commented below) to be able to drill into the scope object: console.log(‘scope is’, scope)