搜尋
首頁php教程PHP开发淺談AngularJs指令之scope屬性詳解

AngularJS使用directive()方法類別定義一個指令:

.directive("name",function(){
  return{
     
  };
})

   

上面是定義一個指令的主體框架,該方法接受兩個參數:

1、第一個上是定義一個指令的主體框架,該方法接受兩個參數:

1、第一個參數:name表示定義的指令的參數:name表示定義的指令的參數:name表示定義的指令的參數:name名稱(angularjs會用這個name註冊這個指令)

2、第二個參數:函數,該番薯必須回傳一個物件或一個函數,但通常我們會回傳一個物件。 return後接的就是回傳的物件。

在傳回的物件中有一個scope屬性,這個屬性用來修飾指令的作用域。

每次在註冊一個指令的時候,這個指令都會考慮一個問題,我們用我自己所在作用域呢,還是創建一個從父作用域繼承的子作用域呢,

還是創建一個隔離的作用域呢(不依賴外部的作用域);

scope屬性的值為false,true,{ } 分別對應著上面的所在作用域,子作用域,隔離作用域。

我們舉三個例子讓我們徹底明白這幾個屬性的用法。

1、scope:false

html代碼

<div ng-controller="myController">
  <div>
    <span>我的名字是</span><span ng-bind="name"></span><br/>
    <span>我的年龄是</span><span ng-bind="age"></span>
    <div my-directive></div>
  </div>
</div>
<script>
  angular.module("app",[])
    .controller("myController",function($scope){
      $scope.name = "kobe";
      $scope.age = 39;
    })
    .directive("myDirective",function(){
      return{
        scope:false,
        restrict:"A",
        template:"<div><h1 id="下面的部分是我们创建指令时生成的">下面的部分是我们创建指令时生成的</h1>"+
            "我的名字是:<span ng-bind=&#39;name&#39;></span><br/>"+
            "我的年龄是:<span ng-bind=&#39;age&#39;></span><br/>"+
            "输入你的新名字:<input type=&#39;text&#39; ng-model=&#39;name&#39;>"+
            "</div>"
      };
    })
</script>

   

效果:

這時,指令的作用域是和myController的作用域是相同的,因此當我們輸入新名字在框中的角色時,上下兩處的名字都會跟著變動,如下圖所示:

2、scope:true

這時剛進入頁面的效果,當我們在輸入框輸入新的名字時,就會發生和第一個實驗不一樣的效果,如圖所示:

這裡,上部分的名字沒有改變,而下面的名字改變了。

這個實驗中,有兩點需要我們注意下:

1、剛進入或刷新完頁後,上下的名字都是一樣是因為:scope為true時,子作用域繼承了父作用的屬性和方法。因此雖然子作用域中沒有定義name和age,

但是能從父作用域的myController繼承。因此,上下顯示了相同的名字和年齡。

2、輸入新名字後,上不變、下變得原因是:我們修改的是子作用域上的name和age,因此下面的名字會改變,上面的名字屬於父作用域,父作用域是不能存取子作用域的,

因此上面的名字的值不會改變。

3、scope:{ }

指令的scope部分做以下修改:

scope:{
  name:"@",
  age:"@"
},

 我們會發現下面的名字和年齡並沒有值,這時因為現在的作用域是隔離的,它並不知道父作用域的屬性和方法。我們可以在指令的後面給其賦值,方法如下:

<div my-directive name="aaa" age="33"></div>

同樣的原因,這個作用域是完全隔離的,因此修改只對指令自身的作用域的屬性和方法有效,與其他任何作用域沒有關係,myController作用域的名字並不會改變。

🎜🎜
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器