這次帶給大家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>登入後複製
name="abc"這個是核心，左邊聯結的是獨立作用域，右邊聯結的是外部的作用域裡的模型abc
#使用父作用域的行為
##&運算子綁定的內容是個方法
<!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中文網其他相關文章！
