angularJS学习之路（十九）---自定义指令关于独立作用域

来源：互联网发布：生意参谋数据抓取编辑：程序博客网时间：2024/04/30 05:43

1.首先关于 scope：{} 和scope：true 效果是一样的

<!DOCTYPE html><html ng-app="myApp"><head><meta charset="utf-8"><title></title></head><body><div ng-init="myProperty = 'wow, this is cool'"></div>Surrounding scope: {{ myProperty }}<div myInheritScopeDirective="SomeCtrl">Inside an directive with inherited scope: {{ myProperty }}</div><div myDirective>Inside myDirective, isolate scope: {{ myProperty }}</div><script type="text/javascript" src="../js/angular.min.js"></script><script>var app = angular.module('myApp', []);app.directive('myDirective', function() {return {restrict: 'A',scope: {}};});app.directive('myInheritScopeDirective', function() {return {restrict: 'A',scope: true};});</script></body></html>

2.关于不设置scope：true的时候非独立作用域的效果

<!doctype html><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div><xingoo></xingoo><xingoo></xingoo><xingoo></xingoo></div><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script><script type="text/javascript">var myAppModule = angular.module("myApp", []);myAppModule.directive("xingoo", function() {return {restrict: 'AE',template: '<div><input type="text" ng-model="username"/>{{username}}</div><br>',repalce: true}})</script></body></html>

3.关于设置 scope：{} 独立作用域的效果

<!doctype html><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div><xingoo></xingoo><xingoo></xingoo><xingoo></xingoo></div><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script><script type="text/javascript">var myAppModule = angular.module("myApp", []);myAppModule.directive("xingoo", function() {return {restrict: 'AE',scope: {},template: '<div><input type="text" ng-model="username"/>{{username}}</div><br>',repalce: true}})</script></body></html>

0 0