AngularJS中isolate scope的用法分析

更新時間：2016年11月22日 14:33:13 作者：栁羅風塵

這篇文章主要介紹了AngularJS中isolate scope的用法,結(jié)合實例形式分析了isolate scope的幾種具體使用方式,需要的朋友可以參考下

本文實例講述了AngularJS中isolate scope的用法。分享給大家供大家參考，具體如下：

angular js中指令directive有個特別有用的東西，那就是 isolate scope （被隔離的scope）

關(guān)于具體他和全局的scope 有什么區(qū)別，可以參考下面這篇文章：

AngularJS 全局scope與Isolate scope通信用法示例

本文主要講解其具體的幾種使用方式：

1. = 的使用

[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: '=' //如果是 = 就是info屬性的值 賦給 當前scope.info
    },
    templateUrl: 'js/directives/appInfo.html'
   };
});

2. =屬性名的使用

[html]

<div ng-controller="AppCtrl as appctrl">
  Ctrl
  <input type="text" ng-model="appctrl.ctrlFlavor">
  Dir
  <div ab="25" 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">'
  };
});

顯示結(jié)果：

3. @ = 和 & 的綜合使用

html 代碼：

<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控制：

//顯示@ = 和 &綜合的
var app = 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:"@", //@指的是屬性的值賦給name 僅此而已
          image:"@",
          movetype:"=", //表示類型等于當前屬性的值
          useMove:"&" //&表示對應(yīng)的函數(shù)的引用 及該屬性對應(yīng)的函數(shù)別名就是他了
        },
        controller:"AppCtrl", //只有這里聲明了 才會將select選項載入進來
        replace:true,
        templateUrl:"shield_isolate.html"
      };
})

模板：

<script type="text/ng-template" id="shield_isolate.html">
    <div class="panel panel-default">
      <div class="panel-body">
        <div>
          <figure>
            <img src="{{image}}">
            <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>
        //這里的":"前的三個參數(shù)分別對應(yīng) 父函數(shù)的三個參數(shù)的名稱
        //":" 后的三個參數(shù)則對應(yīng) 給定值scope 的三個屬性 以便一一對應(yīng)傳值
      </div>
    </div>
</script>

顯示結(jié)果：