您的位置：首页 > 其它

指令作用域

2015-11-05 16:08 330 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-init="someProperty = 'some data'">
<div ng-init="siblingProperty='moredata'">
Inside Div Two: {{ aThirdProperty }}
<div ng-init="aThirdProperty = 'data for 3rd property'" ng-controller="SomeController">
Inside Div Three: {{ aThirdProperty }}
<div ng-controller="SecondController">
Inside Div Four: <span ng-bind="aThirdProperty"></span>
<br>
Outside myDirective: {{ myProperty }}
<div my-directive ng-init="myProperty = 'wow, this is cool'">
Inside myDirective: {{ myProperty }}
</div>
</div>
</div>
</div>
<div ng-controller="aaa">
$scope.j2
$scope.j1
{{j2}}
{{j1}}
<div ng-init="j2='j2'">
<div ng-init="j1='j1'"></div>
</div>
</div>

<h1>隔离作用域</h1>
<p>创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的模板就无法访问外部作用域了</p>
<div ng-controller='MainController'>
Outside myDirective: {{ myProperty }}
<div my-directive2 ng-init="myProperty = 'wow, this is cool'">
Inside myDirective: {{ myProperty }}
</div>
</div>
</div>

<script src="angular.min.js"></script>
<script>
angular.module('myApp', []).controller('SomeController', function($scope) {
})
.controller('SecondController', function($scope) {
})
.directive('myDirective', function() {
return {
restrict: 'A',
scope: true
}
})
.controller('aaa', function($scope) {
})
.controller('MainController', function($scope) {
})
.directive('myDirective2', function() {
return {
restrict: 'A',
scope: {},
priority: 100,
template: '<div>Inside myDirective {{ myProperty }}</div>'
};
});
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航

指令 作用域

指令作用域