Angular custom directive link function won't accept 'restrict'

- 1 answer

Ad

I am just playing with a custom directive, an example of which I have here.

As is it displays as expected, but as soon as I add a restrict: 'E' to the scope, as in plunker file car.js as in the following (uncomment the line)

function CarCard() {

return {
  scope: {
   // restrict: 'E', // uncomment this and it breaks
    car: '='
  },

I get

Invalid isolate scope definition for directive 'myCarCard'. Definition: {... restrict: 'E' ...}

I have been looking at the doco for hours, I just cannot see what is wrong here (I am sure I have spelt restrict and 'E' correctly.

Although it works without it, I would very much like to know why my restrict does not work.

Any help greatly appreciated!

Ad

Answer

Ad

restrict should be outside of scope.

If you put it inside scope,it'll consider it as a property of scope and check for bindings.

Bindings with scope are @ , = , & .

So your restrict: 'E', inside scope is not valid.

try like this

  restrict: 'E',
  scope: {
    car: '='
  },

PLNKR

Ad
source: stackoverflow.com
Ad