Angularjs Study VIII (use of isolate scope in Angularjs)

Angular JS in the directive directive has a particularly useful thing, that is isolate scope (isolated scope)

What's the difference between a specific and a global scope, you can refer to this blog post:

AngularJS global scope and isolate scope communication

This article mainly explains its specific use methods:

1. Use of =

[HTML] <div class= "card" ng-repeat= "app in Apps" >           <app-info info= "app" ></app-info>         </ Div>     [JS]     app.directive (' AppInfo ', function () {   return {restrict: ' E ', scope: {   info: ' = '//If yes = Is the value of the Info property assigned to the current Scope.info}, Templateurl: ' js/directives/appinfo.html '   }; });

2. = Use of property names

[HTML]     <div ng-controller= "Appctrl as Appctrl" >           Ctrl           <input type= "text" ng-model= "Appctrl.ctrlflavor" >           Dir           <div ab= "drink=" 123456 "flavor=" Appctrl.ctrlflavor "></div>        </div>        [JS] var app = Angular.module ("Drinkapp", []), App.controller ("Appctrl", function () {var Appctrl = this; appctrl.ctrlflavor = "b Lackberry ";}); App.directive ("Drink", function () {return {scope: {flavor: "=ab"},template: ' <input type= "text" ng-model= "Flavor" > '};});

Show Results:

3. Combined use of @ = and &

HTML code:

<div class= "Maincontroller" ng-app= "Isolateapp" >     <div ng-controller= "Appctrl" >     <div class= " Row ">     <character name=" Roman regins "image=" img/p1.jpg "movetype=" Movetype "use-move=" Getmove (name, Movetype,move) "class=" col-xs-4 "></character> <character  name=" Seth Rollins "image="./img/p2.jpg " Movetype= "Movetype" use-move= "Getmove (name,movetype,move)" class= "col-xs-4" ></character> <character  name= "Dean Ambrose" image= "./img/p3.jpg" movetype= "Movetype" use-move= "Getmove (name,movetype,move)" class= " Col-xs-4 "></character> </div> </div>  </div>

JS Control:

var app showing @ = and & Integrated   = Angular.module (' Isolateapp ', []);   App.controller ("Appctrl", [' $scope ', "$element", Function ($scope, $element) {       $scope. getmove = function (name, Movetype,move) {   console.log (name+ ' $$$ ' +movetype+ ' $$$ ' +move);   }   $scope. movetypes = [' Amove ', ' Bavi ', ' cmp4 '];           $scope. Movetype = $scope. Movetypes[0];   }])       . directive ("character", function () {       return {   restrict: "E",   scope:{   name: "@",  //@ The value of the attribute is assigned to name.   Image: "@",    movetype: "=",//Represents a value of type equal to the current property   usemove: "&"//& represents a reference to the corresponding function and the property corresponding to the function alias is him   },   controller: "Appctrl",//only this declaration will be loaded in the Select option   replace:true,   templateurl : "Shield_isolate.html"   };   })

Template:

<script type= "Text/ng-template" id= "shield_isolate.html" >    <div class= "Panel Panel-default" ><div class= "Panel-body" ><div><figure>      <figcaption>{{name}} </figcaption></figure></div></div><div>move:   <input type= "text" ng-model= " Value "class=" Form-controller "/></div><div>   Select Move Type:   <select ng-model=" Movetype "   ng-options=" Movetype for Movetype in Movetypes ">   </select></div><div class=" Panel-footer clearfix "><div class=" btn btn-primary "  ng-click=" Usemove ({name:name,movetype:movetype,move : value}) ">action!</div>//here": "Three parameters corresponding to the parent function's three parameter name//": "After the three parameters corresponding to the given value of the scope of the three attributes to one by one corresponding to the value of </div> </div></script>

Show Results:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Angularjs Study VIII (use of isolate scope in Angularjs)