Tag: directives

Angular Directive Isolate Scope Binding with Parameters

Adam WeeksLeave a comment

(First off, sorry for the long winded post title. It is basically what I google every time I’m trying to remember the functionality.)

Let’s say you have a directive that allows a user to enter data. When that user is done entering data, the directive processes the data, then sends the result back up to the parent. If we were to do this with two-way data binding, we’d have to set up watchers to know when the values were changed. There is a way to do it without the watchers though. We can use the parent scope binding type: “&”.

Read More »

Angular Directive Template for WebStorm

Adam WeeksLeave a comment

If you’re like me, you find yourself rewriting a lot of boilerplate code with Angular. Especially when creating new files. I just started using templates in WebStorm and it is quite the time saver!

Here’s my first one I use for creating a new directive. This utilizes the bindToController feature of directives for Angular 1.3+.


(function() {
'use strict';
angular
.module('${moduleName}')
.controller('${controllerName}', [${controllerName}])
.directive('${directiveName}', [${directiveName}]);
function ${controllerName}() {
var vm = this;
vm.activate = function() {
};
vm.activate();
}
function ${directiveName}() {
return {
restrict: 'E',
scope: {},
templateUrl: '',
controller: '${controllerName}',
controllerAs: 'vm',
bindToController: true,
};
}
})();

view raw

DirectiveTemplate.js

hosted with ❤ by GitHub

Take this code and create a new template with it in WebStorm by going to Preferences, Editor, File and Code Templates, then hitting the “+” button.

Once the template is in Webstorm, you can see it in the new file window:
Screenshot 2015-06-11 15.09.44

You’ll then be prompted to fill out all of the variables:
Screenshot 2015-06-11 15.10.45

Hope this saves some time!

P.S. For you Sublime Text users, you can use this as a ‘trigger’ as well for use in new files!