angularJS学习之路(十九)---自定义指令关于独立作用域
时间:2022-06-25
本文章向大家介绍angularJS学习之路(十九)---自定义指令关于独立作用域,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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>
- 洛谷P3807 【模板】卢卡斯定理exgcd
- 洛谷P1586 四方定理
- 【SQLServer】记一次数据迁移-标识重复的简单处理
- Django用户登录与注册系统
- 洛谷P1450 [HAOI2008]硬币购物
- 一个完整的Django入门指南(二)
- 一个完整的Django入门指南(三)
- 1.Django自学课堂 模板的使用
- 23.Django基础
- SpringBoot开发案例之整合Quartz注入Service
- 谈谈代码质量问题
- SpringCloud config配置文件加密
- SpringCloud服务比较快的下线配置
- 洛谷P2870 [USACO07DEC]最佳牛线,黄金Best Cow Line, Gold
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RabbitMQ入门Demo,基于springboot
- 收藏|Pandas缺失值处理看这一篇就够了!
- Spring Boot项目页面报错 OTS parsing error: Failed to convert WOFF 2.0
- Spring Boot开启JSP页面热部署
- Springboot thymeleaf热部署
- Java初始化List的6种方式
- Java遍历Map对象的四种方式
- 【SpringBoot源码解析】第三章:SpringBoot通过打成war包的方式是如何启动的
- 让你编码嗨到停不下来的8个VSCode插件
- 【SpringBoot源码解析】第四章:SpringBoot是如何自动装配SpringMvc的
- 【SpringBoot源码解析】第二章:SpringBoot是如何通过内置Tomcat启动的
- 技术译文 | How Can ScaleFlux Handle MySQL Workload?
- 技术译文 | MySQL 8 需要多大的 innodb_buffer_pool_instances 值(上)
- 前端登录,这一篇就够了
- 技术译文 | MySQL 8 需要多大的 innodb_buffer_pool_instances 值(下)