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 ...
随机推荐
- C语言第四次实验
这次实验共计7道题目 以下代码亲测无误 1.用选择排序法,键盘输入10个整数,对10个整数进行排序(升序) 1.第一种思路就是常规思路,输入--排序--输出 源代码如下: //常规思路,输入,排序,输 ...
- ARM汇编关键知识点总结（转）
1.LDR R1, =COUNT 意思是将 COUNT 变量的地址放到 R1中LDR R1, COUNT 意思是将 COUNT 变量地址里面的内容赋给 R1 2. Load-Store 结构——这个应 ...
- windows7 64位机上安装配置CUDA7.5(或8.0)+cudnn5.0操作步骤
按照官网文档 http://docs.nvidia.com/cuda/cuda-installation-guide-microsoft-windows/index.html#axzz4TpI4c8v ...
- Java虚拟机笔记（一）：类加载机制
一.概述 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 二.类加载的生命周期 类从被加载到 ...
- JMeter的__threadGroupName使用注意事项
JMeter从4.1版本开始引入了一个新函数"${__threadGroupName}",这个函数的作用是返回当前线程组的名字.${__threadGroupName}的用途也较为 ...
- Python之pexpect详解
一.引子 Pexpect程序主要用于人机对话的模拟,就是那种系统提问,人来回答yes/no,或者账号登陆输入用户名和密码等等的情况.因为这种情况特别多而且繁琐,所以很多语言都有各种自己的实现.最初的第 ...
- oracle存储过程 关于update的动态SQL-工作心得
本随笔文章,由个人博客(鸟不拉屎)转移至博客园 发布时间: 2018 年 12 月 20 日 原地址:https://niaobulashi.com/archives/oracle-procedure ...
- Markdown 版本演进
本文作为 Markdown 系列的第二篇,对上一篇使用 Markdown 写技术博客,我踩过的 6个坑博客提到的版本变迁进行简要的提纲说明. 如果不想读文章,请直接看思维导图,使用 Atom + ma ...
- MUI的踩坑笔记
最近在做公司项目的手机端实现,稍微记录下遇到的坑 1.在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady( ...
- 爬虫进阶教程：极验(GEETEST)验证码破解教程
摘要 爬虫最大的敌人之一是什么?没错,验证码!Geetest作为提供验证码服务的行家,市场占有率还是蛮高的.遇到Geetest提供的滑动验证码怎么破?授人予鱼不如授人予渔,接下来就为大家呈现本教程的精 ...