Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS An Introduction to Directives Directives: restrict

Posted by Faddah Wolf
Faddah Wolf
12,811 Points

Directives: restrict challenge - restrict has not been covered yet?

hello Alex Vanston ,

the final Challenge in the Direcetives module - Directives: restrict: this has not been covered thus far in the whole AngularJS module, has it? i don't recall it being used, explained or gone over prior to this. i might be wrong, but it seems weird to be asked to do a challenge on a element of AngularJS that has not been covered yet.

please advise/explain? thank you.

best,

-- faddah wolf portland, oregon, u.s.a.

app.js 
angular.module('treehouseCourse', [])
  .directive('myCourse', function() {
    return {
      // YOUR CODE HERE
    }
  });
index.html 
<!DOCTYPE html>
<html ng-app="treehouseCourse">
<head>
  <title>Angular.js</title>
  <script src="js/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>

  <div my-course></div>

</body>
</html>

2 Answers

curtis allen
curtis allen
28,800 Points

Hey Faddah, Here is the solution I came up with. Also, I agree with you about them not really explaining this. I was really excited about taking an Angularjs course on teamtreehouse, but this course has been really disappointing.

angular.module('treehouseCourse', [])
  .directive('myCourse', function() {
    return {
      // YOUR CODE HERE
       restrict: 'A',
      link: function($scope, $element, $attrs) {
       alert("Welcome to my course"); 
      }
    }
  });
Fareez Ahmed
Fareez Ahmed
12,728 Points
Fareez Ahmed
Fareez Ahmed
12,728 Points

Alex Vanston I agree that it wasn't sufficiently covered. Could you take us through Curtis' solution above?

Fareez Ahmed
Fareez Ahmed
12,728 Points
Fareez Ahmed
Fareez Ahmed
12,728 Points

Also, curtis allen would the first task have passed if it was just:

angular.module('treehouseCourse', [])
  .directive('myCourse', function() {
    return {
      // YOUR CODE HERE
       restrict: 'A'
      }
    }
  });
Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

The restrict property let's Angular know how the directive can be used, for this challenge the first task asks for the directive to be restricted to just an attribute which can be done by passing the string 'A', other values you can pass are 'E' and 'C' which mean the following.

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name

If for example you only wanted the directive to be used with an attribute and/or class name you would set the restrict string as 'AC', you can find more information about restrictions by visiting the below link and scrolling down a bit.

https://docs.angularjs.org/guide/directive#template-expanding-directive

Faddah Wolf
Faddah Wolf
12,811 Points
Faddah Wolf
Faddah Wolf
12,811 Points

curtis allen ,

thank you, and yes, i found the same info doing a google search that took me to stackoverflow.com. it was very briefly touched upon in the first video in this directives section on angular.js, where Alex Vanston talked about "EACM," but not how to use it with restrict, nor was it in the code in the videos nor in the downloadable code examples, making it very hard to take a test question on something that was barely referred to but not used in any of the examples. in any case, i did find it with a search and passed the test, and your answer confirms it. thank you.

best,

ā€” faddah wolf portland, oregon