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 ...
随机推荐
- 【转】Nginx 反向代理 负载均衡 虚拟主机配置
原文:http://www.cnblogs.com/itdragon/p/8059000.html Nginx 反向代理 负载均衡 虚拟主机配置 通过本章你将学会利用Nginx配置多台虚拟主机,清楚代 ...
- 20155237 2016-2017-2 《Java程序设计》第4周学习总结
20155237 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 继承符合DRY原则. extends UML 多态: 继承可以复用代码, ...
- python线程的使用模式
为了解决阻塞(如I/O)问题,我们需要对程序进行并发设计. 本文将通过将线程和队列 结合在一起,轻松地在 Python 中完成线程编程,创建一些简单但有效的线程使用模式. 一.使用线程 先看一个线程不 ...
- CF 1110 E. Magic Stones
E. Magic Stones 链接 题意: 给定两个数组,每次可以对一个数组选一个位置i($2 \leq i \leq n - 1$),让a[i]=a[i-1]+a[i+1]-a[i],或者b[i] ...
- ELK批量删除索引
一.存在问题 用了一段时间elk发现如果索引长时间不删除,elk会越来越慢,重启elasticsearch服务器节点之前同步时间也会很长 二.解决方法(定期删除索引) 1.在elasticsearch ...
- caffe windows编译
MicroSoft维护的caffe已经作为官方的caffe分支了,编译方式也改了,刚好最近重装了一次caffe windows, 记录一下里面的坑 https://github.com/BVLC/ca ...
- 菜鸟vimer成长记——第2.2章、visual模式
vi是没有可视模式的.然而大多数编辑软件都都是有可视模式.所以我猜测vim是几乎迫于无奈才有了visual模式. 个人建议,能不用就不用.这样能直接在头脑里处理好文本,锻炼文本处理能力,同时能转变过来 ...
- 接口测试之基础篇--http协议
概念:超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种 ...
- [转载]在Windows下为PHP5.6安装redis扩展和memcached扩展
一.php安装redis扩展 1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本 2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...
- Python语言简介以及特点
编程语言的分为编译型语言和解释型语言: 1. 编译型语言: (1) 编译型语言的代表:C.C++.Delphi等, (2) 编译型语言的运行方式:编译 -> 运行 (3) 编译型语言的优缺点分析 ...