淺談angular中@、=、&指令的差異
本篇文章帶大家了解一下angular指令中@，=，&的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
【相關推薦：《angular教學》】
當directive中的scope設定為一個物件的時候，該指令就有了一個獨立的作用域，AngularJS提供了一種綁定策略用於隔離作用域和外部作用域進行通訊。
1、@（or @attr）
使用@符號可以進行單一項目的資料綁定，取值總是一個字串，所以要用{{}}。
另外這也是一個單向的綁定，外部資料改變會反應到內部，但是內部資料變資料變化，外部不會改變。
屬性要用-連接，scope中寫它的駝峰格式。
如果沒有透過@attr指定屬性名稱，那麼本機名稱要與DOM屬性的名稱一致。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
</head>
<body>
<div ng-controller="parent">
<div>
<input type="text" ng-model="name"/>
</div>
<my-name show-name="{{name}}">
</my-name>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parent", function($scope){
$scope.name = "Jhon";
}).directive("myName", function(){
return {
restrict:"EA",
scope:{
showName: '@'
// name: '@showName'
},
template:'<input type="text" ng-model="showName"/>',
// template:'<input type="text" ng-model="name"/>',
}
});
</script>
</html>2、= （or =attr）
使用=進行雙向資料綁定，任何一方的值改變都會反應到另一方。因為是雙向綁定，所以不要用{{}}，不然以下demo會報錯。
屬性要用-連接，scope中寫它的駝峰格式。
如果沒有透過@attr指定屬性名稱，那麼本機名稱要與DOM屬性的名稱一致。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
</head>
<body>
<div ng-controller="parent">
<div>
<input type="text" ng-model="name"/>
</div>
<my-name show-name="name">
</my-name>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parent", function($scope){
$scope.name = "Jhon";
}).directive("myName", function(){
return {
restrict:"EA",
scope:{
showName: '='
},
template:'<input type="text" ng-model="showName"/>'
}
});
</script>
</html>3、&（or &attr）
&用來綁定外部的函數。
屬性要用-連接，scope中寫它的駝峰格式。
如果沒有透過@attr指定屬性名稱，那麼本機名稱要與DOM屬性的名稱一致。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
</head>
<body>
<div ng-controller="parent">
<div>
<input type="text" ng-model="count"/>
</div>
<my-name show-name="increment()">
</my-name>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parent", function($scope){
$scope.count = 0;
$scope.increment = function(){
$scope.count++;
};
}).directive("myName", function(){
return {
restrict:"EA",
scope:{
showName: '&'
},
template:'<input type="button" ng-click="showName()" value="+1"/>'
}
});
</script>
</html>更多程式相關知識，請造訪：程式設計影片！ ！
以上是淺談angular中@、=、&指令的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
泰拉瑞亞怎麼用指示取得物品？ -泰拉瑞亞怎麼收藏物品?
Mar 19, 2024 am 08:13 AM
泰拉瑞亞怎麼用指示取得物品？一、什麼是泰拉瑞亞給予物品指令在泰拉瑞亞遊戲中，給予物品指令是一項非常實用的功能。透過這個指令，玩家可以直接取得需要的物品，而不必費力地去打怪或傳送到某個地點。這樣可以大大節省時間，提高遊戲的效率，讓玩家更專注於探索和建立世界。總的來說，這個功能讓遊戲體驗變得更加流暢和愉快。二、如何使用泰拉瑞亞給予物品指令1.打開遊戲並進入遊戲介面。 2.按下鍵盤上的「Enter」鍵，開啟聊天視窗。 3.在聊天視窗中輸入指令的格式：「/give[玩家名稱][物品ID][物品數量]」。
如何在Ubuntu 24.04上安裝Angular
Mar 23, 2024 pm 12:20 PM
Angular.js是一種可自由存取的JavaScript平台，用於建立動態應用程式。它允許您透過擴展HTML的語法作為模板語言，以快速、清晰地表示應用程式的各個方面。 Angular.js提供了一系列工具，可協助您編寫、更新和測試程式碼。此外，它還提供了許多功能，如路由和表單管理。本指南將討論在Ubuntu24上安裝Angular的方法。首先，您需要安裝Node.js。 Node.js是一個基於ChromeV8引擎的JavaScript運行環境，可讓您在伺服器端執行JavaScript程式碼。要在Ub
VUE3快速入門：使用Vue.js指令實作選項卡切換
Jun 15, 2023 pm 11:45 PM
本文旨在協助初學者快速入手Vue.js3，實現簡單的選項卡切換效果。 Vue.js是一個流行的JavaScript框架，可用於建立可重複使用的元件、輕鬆管理應用程式的狀態和處理使用者介面的互動操作。 Vue.js3是該框架的最新版本，相較於先前的版本變動較大，但基本原理並未改變。在本文中，我們將使用Vue.js指令實作選項卡切換效果，目的是讓讀者熟悉Vue.js的
淺析angular中怎麼使用monaco-editor
Oct 17, 2022 pm 08:04 PM
angular中怎麼使用monaco-editor？以下這篇文章記錄下最近的一次業務中用到的 monaco-editor 在 angular 中的使用，希望對大家有幫助！
如何使用PHP和Angular進行前端開發
May 11, 2023 pm 04:04 PM
隨著網路的快速發展，前端開發技術也不斷改進與迭代。 PHP和Angular是兩種廣泛應用於前端開發的技術。 PHP是一種伺服器端腳本語言，可以處理表單、產生動態頁面和管理存取權限等任務。而Angular是一種JavaScript的框架，可以用來開發單一頁面應用程式和建構元件化的網頁應用程式。本篇文章將介紹如何使用PHP和Angular進行前端開發，以及如何將它們
使用Angular和Node進行基於令牌的身份驗證
Sep 01, 2023 pm 02:01 PM
身份驗證是任何網路應用程式中最重要的部分之一。本教程討論基於令牌的身份驗證系統以及它們與傳統登入系統的差異。在本教程結束時，您將看到一個用Angular和Node.js編寫的完整工作演示。傳統身份驗證系統在繼續基於令牌的身份驗證系統之前，讓我們先來看看傳統的身份驗證系統。使用者在登入表單中提供使用者名稱和密碼，然後點擊登入。發出請求後，透過查詢資料庫在後端驗證使用者。如果請求有效，則使用從資料庫中獲取的使用者資訊建立會話，然後在回應頭中傳回會話訊息，以便將會話ID儲存在瀏覽器中。提供用於存取應用程式中受
