Angular Directive scope

Angular Directive scope

1. When the scope attribute is not specified in directive, the directive directly uses the scope of the app;

2. When you specify the scope attribute in directive, there are 3 ways to scope scope:

2.1. =: Represents the data bidirectional binding, as long as the property changes, the value of scope in the app (that is, the parent scope) and the corresponding value in the directive will change simultaneously;

2.2. @: Represents the data one-way binding, the change of the value only affects directive, does not affect the app (that is, the parent scope) other values, that is, the orphaned scope;

2.3. &: Represents a method that inherits or uses a scope binding in the parent scope.

Here is a demo to illustrate:

Example

Directive HTML:

<gmb-per say= "Myalert ()" abc= "Gmbpernotification_d" >gmb-per</gmb-per>

Coffee Directive Code:

# module

Angular.module (' demo ', [])
. Controller ' Myctrl ', ($scope),

$scope. Gmbpernotification_d = [+]
$scope. Myalert =
Alert (11)

#directive

Pushnotificationapp.directive ' Gmbper ', ($timeout, $compile)Restrict:' AE '#terminal:truetransclude:true#replace:trueTemplate:' <div class= ' col-lg-4 chartwrap "ng-click=" Say () "ng-repeat=" Pern in abc ">121212</div>"#replace:trueSCOPE:ABC:=Gmbpernotification_d:=say:' & 'Controller: ($scope)-# $scope. MyTest= [] Link: (scope, Element, Attrs)-Console.log

Angular Directive scope