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 ...
随机推荐
- 使用zabbix发送邮件的简易设置流程(存档用）
1.安装邮件软件 (一般默认安装sendmail,这样apache也不用重新设置.) $sudo yum install sendmail 2.在zabbix上设置发送邮件用的本地邮箱 选择管理-&g ...
- 安装luasocket 的正确姿势
在lua中用下面这种方式使用socket,安装luasocket-2.0.2后老是报一些莫名其妙的错误. require("socket") 下面是部分报错信息 lua: erro ...
- 2017-2018-1 20155232 《信息安全系统设计基础》第十周课堂测试（ch06）补交
# 2017-2018-1 20155232 <信息安全系统设计基础>第十周课堂测试(ch06)补交 上课时完成测试后在提交的时候,没有提交成功,进行补交. 1.下面代码中,对数组x填充后 ...
- WPF RichTextBox自动调整高度
原文:WPF RichTextBox自动调整高度 大概两年前的这个时间段,当时做项目遇到了一个问题:环境VS2005.WinForm,需要RichTextBox根据内容自动调整高度.当时用了各种方法都 ...
- 【转载】MSXML应用总结 开发篇（上）
原文:http://blog.sina.com.cn/s/blog_48f93b530100ejv9.html 本篇是接前文“MSXML应用总结 概念篇”写的,主要总结一下MSXML DOM接口的应用 ...
- 【BZOJ1044】[HAOI2008]木棍分割
[BZOJ1044][HAOI2008]木棍分割 题面 bzoj 洛谷 题解 第一问显然可以二分出来的. 第二问: 设\(dp[i][j]\)表示前\(i\)个,切了\(j\)组的方案数 发现每次转移 ...
- 开箱即用 - Memcache缓存
废话少说,先上代码C# memcache Demo memcache 是服务器缓存系统,以键值对方式保存数据到内存中,把对象序列化后,理论上可支持所有的数据类型. 使用情景:怎么用都可以,注意的是它只 ...
- 洛谷P1313 计算系数【快速幂+dp】
P1313 计算系数 题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别 ...
- 一个简单的获取RGB值方式
操作系统内置了许多小工具,有时候这些小工具也挺有用的,省去了安装一些复杂的软件, 截图 通过键盘PrtSc获取到要取色的图片,然后用画图工具打开 查看 通过画图工具的取色工具,取到你需要的颜色,然后点 ...
- python-flask-ssti(模版注入漏洞)
SSTI(Server-Side Template Injection) 服务端模板注入 ,就是服务器模板中拼接了恶意用户输入导致各种漏洞.通过模板,Web应用可以把输入转换成特定的HTML文件或者e ...