AngularJS Directives - Can Isolated Scope Attributes be required?

Question

I am new to Angular and am attempting to create a directive and have a question about isolated scope attributes. If I have a directive:

MyApp.directive('myDirective', function() { return { scope: { symbol: '@' },

...

Is it possible to make symbol required somehow? In my case if it is not supplied the directive will not function correctly.

What behaviour would you want if someone failed to provide the attribute? — Davin Tryon
– Davin Tryon, Commented Feb 22, 2014 at 15:50
in your directive link or controller function check scope.symbol for undefined or whatever value you consider wrong then throw and error if it's not given — Mark-Sullivan
– Mark-Sullivan, Commented Feb 22, 2014 at 15:57
This would be used during development. When designing the views it has been common to forget or not realize that a specific attribute is required for the directive to function correctly. Some sort of visual clue needs to be supplied to let them know the correct usage. It could be an alert or a toast or even replace the content of the template with help text instead. — Elliot
– Elliot, Commented Feb 23, 2014 at 16:45

fooby · Accepted Answer · 2014-02-22 18:09:34Z

You can use a second directive and require that in your first.

MyApp.directive('myDirective', function() { return { scope: { symbol: '@' }, require: 'symbol', link: angular.noop //this is needed to check for the required controller ... } } MyApp.directive('symbol', function () { return { controller: angular.noop } }

The controller is necessary for myDirective to actually require symbol. Keep in mind in cases like these, prefixing your directives with a namespace is crucial.

Here is a jsfiddle with an example of this working. In the example I've overridden the angular error service to put out an alert on all errors. You can see that the cause of the error is the <div> missing the required directive.

http://jsfiddle.net/fooby12/rqRg2/

This definitely works although it would be nice if it could be contained in a single directive. Would it be possible in the link function to check the attrs and when one is missing throw the error? I will try this out and see if I can get it working. I guess the answer is you cant actually require attributes be set but have to write your own code to check for this.
I found a way to do this using the link function: code link: function(scope, element, attrs) { if (attrs.requiredAttr == undefined) { // handle error as necessary } } code
Yes, checking for it in the link is something you can always do. Using angular.isUndefined(attrs.requiredAttr) is a safer way. I tend to use the require property because I can isolate the code to validate the attr in its own directive, and angular throws a nice $compile error. It also means you can write more specific tests, and you dont have to test the missing attr code as part of the primary directive. If you really want to get advanced, you could build the required directives dynamically before angular bootstraps itself

Collectives™ on Stack Overflow

AngularJS Directives - Can Isolated Scope Attributes be required?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related