angular獨立作用域的使用概念
這次帶給大家angular獨立作用域的使用概念，angular獨立作用域的使用注意事項有哪些，下面就是實戰案例，一起來看一下。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
<ceshi></ceshi>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('ceshi',function(){ var option = {
template:'<p>{{abc}}</p>'
}; return option;
});
myApp.controller('mainController',function($scope){
$scope.abc = 'ericzheng';
}); </script></body></html>當我們自己創建某個指令時，這個指令肯定不可能只使用一次，是要重複多次使用的，有的在一個頁面內或者一個控制器內需要使用多次。
類似上面的這種場景，在任何一個輸入框內改變數據，都會導致其他的標籤內的數據一同發生改變，這顯然不是我們想要的，這個時候就需要獨立作用域了。
想轉換成獨立作用域只需要一行程式碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
<ceshi></ceshi>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('ceshi',function(){ var option = {
template:'<p>{{abc}}</p>',
scope:{}
}; return option;
});
myApp.controller('mainController',function($scope){
$scope.abc = 'ericzheng';
}); </script></body></html>單向資料綁定：
##@運算子，雙引號內的內容當作字串進行綁定
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
<my-directive name="aaaa"></my-directive>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){ var option = {
template:'<p>wew{{name}}<p/>',
scope:{
name:'@'
}
}; return option;
});
myApp.controller('mainController',function($scope){
}); </script></body></html>
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
<input type="text" ng-model="abc">
<my-directive name="abc"></my-directive>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){ var option = {
template:'<p>wew{{name}}<input ng-model="name"><p/>',
scope:{
name:'='
}
}; return option;
});
myApp.controller('mainController',function($scope){
$scope.abc = 'ericzheng';
}); </script></body></html>
##&運算子綁定的內容是個方法
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
<my-directive fn1="fn2(name)"></my-directive>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){ var option = { restrict:'E', template:'<button ng-click="fn1({name:\'username\'})">wfewef</button>', scope:{ fn1:'&'
}
}; return option;
});
myApp.controller('mainController',function($scope){
$scope.fn2 = function(attr){ console.log(attr);
}
}); </script></body></html>
如何看懂：
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
angular的scopel指令使用詳解Angular Material的使用詳解#angularjs中$apply()的使用詳解以上是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)
c語言中typedef struct的用法
May 09, 2024 am 10:15 AM
typedef struct 在 C 語言中用於建立結構體類型別名，簡化結構體使用。它透過指定結構體別名將一個新的資料類型作為現有結構體的別名。優點包括增強可讀性、程式碼重複使用和類型檢查。注意：在使用別名前必須定義結構體，別名在程式中必須唯一且僅在其宣告的作用域內有效。
java中的variable expected怎麼解決
May 07, 2024 am 02:48 AM
Java 中的變數期望值異常可以透過以下方法解決：初始化變數；使用預設值；使用 null 值；使用檢查和賦值；了解局部變數的作用域。
js中閉包的優缺點
May 10, 2024 am 04:39 AM
JavaScript 閉包的優點包括維持變數作用域、實作模組化程式碼、延遲執行和事件處理；缺點包括記憶體洩漏、增加了複雜性、效能開銷和作用域鏈影響。
c++中的include什麼意思
May 09, 2024 am 01:45 AM
C++ 中的 #include 預處理器指令將外部來源檔案的內容插入到目前原始檔案中，以複製其內容到目前原始檔案的相應位置。主要用於包含頭文件，這些頭文件包含程式碼中所需的聲明，例如 #include <iostream> 是包含標準輸入/輸出函數。
C++ 智慧指標：全面剖析其生命週期
May 09, 2024 am 11:06 AM
C++智慧指標的生命週期：建立：分配記憶體時建立智慧指標。所有權轉移：透過移動操作轉移所有權。釋放：智慧指標離開作用域或被明確釋放時釋放記憶體。物件銷毀：所指向物件被銷毀時，智慧型指標成為無效指標。
c++中函數的定義和呼叫可以巢狀嗎
May 06, 2024 pm 06:36 PM
可以。 C++ 允許函數巢狀定義和呼叫。外部函數可定義內建函數，內部函數可在作用域內直接呼叫。巢狀函數增強了封裝性、可重複用性和作用域控制。但內部函數無法直接存取外部函數的局部變量，且傳回值類型需與外部函數宣告一致，內部函數不能自遞歸。
vue中let和var的區別
May 08, 2024 pm 04:21 PM
在 Vue 中，let 和 var 宣告變數時在作用域上存在差異：作用域：var 具有全域作用域，let 具有區塊級作用域。區塊級作用域：var 不會建立區塊級作用域，let 建立區塊級作用域。重新宣告：var 允許在同一作用域內重新宣告變數，let 不允許。
C++ 智慧指標：從基礎到高級
May 09, 2024 pm 09:27 PM
智慧指針是C++專用指針，能夠自動釋放堆記憶體對象，避免記憶體錯誤。類型包括：unique_ptr：獨佔所有權，指向單一物件。 shared_ptr：共享所有權，允許多個指標同時管理物件。 weak_ptr：弱引用，不增加引用計數，避免循環引用。使用方法：使用std命名空間的make_unique、make_shared和make_weak建立智慧指標。智慧型指標在作用域結束時自動釋放物件記憶體。進階用法：可以使用自訂刪除器控制物件釋放方式。智慧型指標可有效管理動態數組，防止記憶體洩漏。
