版权声明:本文为博主原创文章,未经博主允许不得转载。
本文将对AngularJS自定义指令详解中的scope属性配合实例演示,进行深度讲解:
scope属性值可以是Boolean类型, 也可以是 Object类型,
Boolean类型:
scope值为false时,可以理解成指令内部并没有一个新的scope,它和指令以外的代码共享同一个scope;
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Directive Demo</title>
<script type="text/javascript" src="js/lib/angular.1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="lib/bootstrap.3.3.6/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<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></my-directive>
</div>
</div>
</div>
</body>
</html>
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内部的属性详解及实例演示了,如有问题,欢迎在下方提问!