您的位置：首页 > 运维架构

Angular自定义指令之scope属性详解及实例演示

2017-08-13 10:10 381 查看

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文将对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代
4000
码：

<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内部的属性详解及实例演示了，如有问题，欢迎在下方提问！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular 实例

相关文章推荐

新的分享

章节导航