Angular自定義指令之scope屬性詳解及例項演示
阿新 • • 發佈：2019-02-14
本文將對AngularJS自定義指令詳解中的scope屬性配合例項演示，進行深度講解：
scope屬性值可以是Boolean型別， 也可以是 Object型別,
Boolean型別：
scope值為false時，可以理解成指令內部並沒有一個新的scope，它和指令以外的程式碼共享同一個scope；
html程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Directive Demo</title app.js程式碼：
//Define `myApp` module
var app = angular.module('DirectiveDemo', []);
app.controller('DemoController', function($scope) {
});
app.directive('myDirective', function() {
return {
restrict: 'AE',
scope: false,
template: "自定義指令作用域<input ng-model='text'><br /><br />" +
"<p>結果：{{text}}</p>"
}
});
scope值為true時，會從父作用域繼承並建立一個新的作用域物件；
app.directive('myDirective', function() {
return {
restrict: 'AE',
scope: true,
template: "自定義指令作用域<input ng-model='text'><br /><br />" +
"<p>結果：{{text}}</p>"
}
});也就是說，當父作用域修改時，子作用域就被建立並繼承父作用域，將會顯示與父作用域一樣的內容，但是，如果修改子作用域的內容，父作用域將不會受到影響。
下面是效果：
修改父作用域內容，子作用域就被建立並繼承父作用域
修改子作用域的內容，父作用域將不會受到影響：
Object型別：
{ }：建立一個新的“隔離”scope，但仍可與父scope通訊
@：單向繫結，外部scope能夠影響內部scope，內部不能影響外部
html程式碼：
<body ng-app="DirectiveDemo" ng-controller="DemoController">
<div class="page-header">
<h1>Directive Demo: scope</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
父作用域：<input ng-model="text">
<br /><br />
<my-directive content="{{text}}"></my-directive>
</div>
</div>
</div>
</body>app.js程式碼：
//Define `myApp` module
var app = angular.module('DirectiveDemo', []);
app.controller('DemoController', function($scope) {
});
app.directive('myDirective', function() {
return {
restrict: 'AE',
scope: {
content: '@'
},
template: "自定義指令作用域<input ng-model='content'><br /><br />" +
"<p>結果：{{content}}</p>"
}
});
效果圖：
空格之後的數字是在子作用域中改變的內容，這就說明內部作用域不能影響外部作用域。
=： 雙向繫結，‘=’
html程式碼：
...
<my-directive content="text"></my-directive>
...app.js程式碼：
...
content: '='
...這裡要注意在自定義指令中因為是雙向繫結，故不需要大括號。
效果圖：
這裡雙向繫結，使得內外部作用域內容保持一致。
&： 內部scope的函式返回值和外部scope繫結
html程式碼：
其中要注意的是，自定義指令中的屬性getContent，在html中要寫成get-content，然後與父作用域的text繫結。
<body ng-app="DirectiveDemo" ng-controller="DemoController">
<div class="page-header">
<h1>Directive Demo: scope</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
父作用域：<input ng-model="text">
<br /><br />
<my-directive get-content="text"></my-directive>
</div>
</div>
</div>
</body>app.js程式碼：
這裡scope中的屬性作為一個函式，其返回值與父作用域的內容繫結
app.directive('myDirective', function() {
return {
restrict: 'AE',
scope: {
getContent: '&'
},
template: "result: {{getContent()}}"
}
});
以上就是scope內部的屬性詳解及例項演示了，如有問題，歡迎在下方提問！