Directive--scope Options and binding policy

Scope has true (to force the creation of a separate range) and False (default);

When the scope option is written in this form of scope:{}, the isolation scope has been generated for the directive, and now we look at the three forms of the binding strategy:&, =, @.

Instruction code:

function () {  return  {   ...    Scope: {      ' = ',      ' @ ',      ' & '    }    ...  } ;

Binding Policy One @:

It is used with {{}} and will always return a string .

<my-directive ob1= ' {{vm.msg}} ' ></my-directive>

It binds the property values in both the local scope and the DOM (and the value of this property must be in the parent scope), and the simple point is that you have a double curly brace expression in the template, and then we bind the contents of the expression to the properties of the specific name in the instruction in the HTML to see the following code:

directive ("direct",function() {        return{            ' ECMA ',            ' < div> directive: {{name}}</div> ',            scope:{              name:' @forName '}}}   . Controller ("Namecontroller",function($scope) {      $scope. Name= "Zhang San";});

HTML code:

<div ng-controller= "Namecontroller" > for   -name= "{{name}}" ></direct><div>

{{Name}} was successfully bound to the name in the parent controller. Of course, you can also write the name: ' @ ' In this case, the default DOM property name is

That is, for-name= "{{name}}" can be abbreviated to Name= "{{name}}";

Binding Measurement two =:

Using the object's reference, rather than the simple string, is also the key to a two-way binding.

It passes a reference to the object in your directive. It can express properties that are synchronized with the detached scope, allowing two-way binding.

<my-directive obj1= ' Vm.someobject ' ></my-directive>

JS Code:

directive ("direct",function() {        return{            ' ECMA ',            ' < div> directive: <input ng-model= "model"/></div> ',            scope:{              model:' = '            }         }   }). Controller ("Namecontroller",function($scope) {      $scope. Data=[{name: "Zhang San"},{name: "John Doe"}]; });

HTML code:

<div ng-controller= "Namecontroller" >        <input ng-model= "Mark"/>        <direct model= "Mark"/> </direct> </div>

Binding Measurement Three @:

What it means is to bind the parent scope and wrap its properties into a function, noting that it is a property, meaning that any type of property will be wrapped into a function, such as a simple string, an array of objects, or a function method.

In this directive, it will act as a function, that is, to execute the pass-through expression when invoked. Use it

The following code:

<my directive callback= ' Vm.showalert (' Hi ') ></my-directive>

JS command:

return  {    ...    Scope: {        ' & '    },    ' <button ng-click= ' callback () ' >Click</button> '     ...}

Summarize:

Create isolation scopes for directives while also accessing attributes in the parent to integrate and extend third-party plug-ins

Directive--scope Options and binding policy