The usage analysis of isolate scope in Angularjs _angularjs

This example describes the use of isolate scope in Angularjs. Share to everyone for your reference, specific as follows:

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

As for the specific difference between him and the scope of the global, you can refer to the following article:

ANGULARJS global scope and isolate scope communication usage example

This article mainly explains its specific use of several ways:

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 attribute assigned to the current Scope.info
    },
    templateurl: ' js/directives/appinfo.html '
   };

2. = Use of the property name

[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 = "BlackBerry";
};
App.directive ("Drink", function () {return
  {
    scope: {
      flavor: "=ab"
    },
    Template: ' <input Type= "text" ng-model= "Flavor" (">"
  }
);

Show Results:

3. @ = and & 's integrated use

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:

Show @ = and & Synthetic
var app = Angular.module (' Isolateapp ', []);
App.controller ("Appctrl", [' $scope ', "$element", Function ($scope, $element) {
      $scope. getmove = function (name, Movetype,move) {
        console.log (name+ ' $$$ ' +movetype+ ' $$$ ');
      }
      $scope. movetypes = [' Amove ', ' Bavi ', ' cmp4 '];
      $scope. Movetype = $scope. Movetypes[0]
)
. directive ("character", function () {return
      {
        restrict: "E",
        scope:{
          name: "@",//@ refers to the value of the attribute assigned to name That's it.
          Image: "@",
          movetype: "=",//representing the value of the type equal to the current property
          usemove: "&"//& represents a reference to the corresponding function and the function alias for the property. That's him.
        controller: "Appctrl",///only if it is declared here will the Select option be loaded in
        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>  & lt;figcaption>{{name}}</figcaption> </figure> </div> </div> <d Iv>move: <input type= "text" ng-model= "value" class= "Form-controller"/> </div> &LT;DIV&G
        T
        Select move Type: <select ng-model= "Movetype" ng-options= "Movetype to Movetype in Movetypes" > </select> </div> <div class= "Panel-footer clearfix" > <div class= "btn Btn-pri Mary "ng-click=" Usemove ({name:name,movetype:movetype,move:value}) ">Action!</div>/Here" : "The previous three parameters correspond to the names of three parameters of the parent function//": "Three parameters correspond to the three properties of the given value scope so that one by one corresponds to the value </div> </div> &LT;/SCRIPT&G

 T

Show Results:

I hope this article will help you to Angularjs program design.