Directives and scope

An Angular directive inherits its parent's scope by default.Modify the scope of the directive using the property 'scope' in the directive object.scope : false- This is the default. The directive does not create a new scope, it just uses the parent one.- There is no inheritance but this is not generally a good way of creating re-usable componentsscope : true- Directive has a new scope which prototypically inherits from the parent scope- If more than one directive (under the same parent) requests a new scope, only one scope will be created. (As you would expect: all models should be in sync across duplicate directives)- Be wary of two way data-binding to primitives in the parent scope (do not inherit from primitives in the parent scope as data binding will not work).

scope : {}- Creates new scope, nothing inherited from parentInheriting distinct items from parent$scope.car = {type : 'hyundai', doors : 3}// Cannot insert html due to idiocy from GoConqryou need to create an attribute on the element: carProperty=car // Note no quotes around car. car can be an object.scope : {localProperty : '=car-property'} // Two directional binding with car objectattribute on element : car-name="{{car.name}}" scope : { carName : '@carName' } // Only inherits a string!! Not two way binding!attribute on element:sayhelloFunction='sayHelloThere()'; // sayHello() is function in the parent scopescope : { sayHello : '&sayHelloFunction'} // Now if you call sayHello in the directive, sayHelloThere will be called in the parent