angularJS1笔记-(14)-自定义指令(scope)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<div book-list books="books" parent-books="books" scope-title="{{title}}"></div>
</div>
</div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script> <script>
</script> </body>
</html>
index.js:
var myApp = angular.module('myApp', [])
.directive('bookList', function () {
return {
restrict: 'ECAM',
controller: function ($scope) {
// console.log($scope);
//方式1：&books
// $scope.books = $scope.a(); //可以重新赋值
//方式2：双向绑定 在控制器里改也会改变view的值
// $scope.books = $scope.b;
// $scope.b.push({
// name:"nodejs"
// })
//方式3：
console.log($scope.c)
},
// scope:false,//如果scope此时为真就会和下面的scope是同一个作用域 如果为假的时候就会创建一个继承了父scope的新的作用域
scope: {
//方式1：
//当scope为对象的时候 也会创建一个继承了父scope的新的scope 但是却无法继承父类的数据源
//将父元素books封装成一个a函数
// a: '&books' //a就是可以访问到页面中的一个属性books 从而访问到值 而a会生成一个函数
//方式2：双向绑定
// b:'=parentBooks'
//方式3：单向绑定 只能绑定简单类型 不能绑定对象类型
c:"@scopeTitle"
},
controllerAs: 'bookListController', //起一个别名
template: '<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul></div>',
replace: true
}
})
.controller('firstController', ['$scope', function ($scope) {
console.log($scope);
$scope.books = [
{
name: 'php'
},
{
name: 'js'
},
{
name: 'java'
}
];
$scope.title = "我是title"
}]);
运行结果:
angularJS1笔记-(14)-自定义指令(scope)的更多相关文章
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(12)-自定义指令(compile/link)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(9)-自定义指令(restrict/template/replace)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
随机推荐
- JavaWeb基础—JSP自定义标签入门
自定义标签的作用:替换JSP页面的java代码 步骤:1.标签处理类(标签是一个对象,那也就需要先有类) 2.tld文件 它是一个xml(可以向c标签里借),一般放到WEB-INF下,不让客户端浏览器 ...
- webBrowser.Document.Cookie取不到HttpOnly的Cookie，取Cookie不完整
在做数据采集时,有些网站需要输入验证码,但各网站验证码都不同,不可能有完美的识别验证码的代码,所以我也没去研究,我所采取的方案是:在winform里通过WebBrowser调用网页先手动登录系统,然后 ...
- 使用源安装java JDK
使用下面的命令安装,只需一些时间,它就会下载许多的文件,所及你要确保你的网络环境良好: sudo add-apt-repository ppa:webupd8team/java sudo apt-ge ...
- [2016北京集训试题14]股神小D-[LCT]
Description Solution 将(u,v,l,r)换为(1,u,v,l)和(2,u,v,r).进行排序(第4个数为第一关键字,第1个数为第二关键字).用LCT维护联通块的合并和断开.(维护 ...
- HBase数据结构（读书笔记 ）
背景: 最近在做一些跟大数据相关的东西,涉及到数据的存储和分析,考虑各个方面,选择使用HBase进行存储,使用原生Java API进行数据分析,之后会陆续写一系列来说明最近做的东西,给像我这样未曾涉及 ...
- 【HNOI2014】米特运输
题面 题解 首先我们需要看懂题目 然后我们需要发现一个结论 只要有一个节点的权值确定,那么整棵树的权值就确定了 就像这样:(图片来源于网络,侵删) 然后我们根据这张图片,可以设\(f[i] = a[i ...
- 一个本地DNS解析和mysql授权导致的Mysq连接失败问题(Access denied for user 'loan'@'kfcsdb1' (using password: YES))
web:/home/web/ -u loan -p loan Enter password: ERROR 1045 (28000): Access denied for user 'loan'@'kf ...
- kali下操作 Apache2
Linux系统为Ubuntu 一.Start Apache 2 Server /启动apache服务 # /etc/init.d/apache2 start or $ sudo /etc/init.d ...
- SpringBoot日记——SpringMvc自动配置与扩展篇
为了让SpringBoot保持对SpringMVC的全面支持和扩展,而且还要维持SpringBoot不写xml配置的优势,我们需要添加一些简单的配置类即可实现: 通常我们使用的最多的注解是: @Bea ...
- YouTube视频下载方法汇总
YouTube是一个视频共享网站,YouTuber们自己拍摄并制作视频,上传到YouTube,然后用户观看.分享并评论这些内容.虽然在线观看很方便,但是有些时候你却只能处于离线的状态,比如出差.旅游. ...