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 ...
随机推荐
- MS datatype define（微软数据类型定义）
这里根据MS文档整理了微软数据类型的定义, 参考文档:https://docs.microsoft.com/zh-cn/openspecs/windows_protocols/ms-dtyp/2463 ...
- flex作图
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="htt ...
- [Qt扒手2] PyQt5 路径绘画例子
[说明] 此例扒自 Qt 官网,原例是 C++ 代码,我把它改写成了 Python + PyQt5 版本. 有了前一个例子的成功,这个例子改写的非常之快.记得第一个例子花了我几天的时间,而这个例子只花 ...
- 10 star组件之分页， search模糊查询， action批量处理
1.分页组件高阶 1.分页的class形式(有bug,请看下面的) """ 自定义分页组件 """ class Pagination(obj ...
- CF 1114 D. Flood Fill
D. Flood Fill 链接 题意: 一个颜色序列,每个位置有一个颜色,选择一个起始位置,每次可以改变包含这个位置的颜色段,将这个颜色段修改为任意一个颜色, 问最少操作多少次.n<=5000 ...
- 微信小程序：实现日历功能
一.功能描述 实现日历功能 二. 代码实现 1. index.wxml <view class='wrap'> <view> <view class='date-show ...
- CSS中padding、margin、bordor属性详解
一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...
- js,indexOf()、lastIndexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 提示和注释 注释:indexOf() 方法对大小写敏感! 注释:如果要检索的字符串值没有出现,则该方法返回 -1. 实例 在 ...
- 把模块有关联的放在一个文件夹中 在python2中调用文件夹名会直接失败 在python3中调用会成功，但是调用不能成功的解决方案
把模块有关联的放在一个文件夹中 在python2中调用文件夹名会直接失败在python3中调用会成功,但是调用不能成功 解决办法是: 在该文件夹下加入空文件__init__.py python2会把该 ...
- WHO ARE YOU?--writeup
TIPS:广东强网杯线上题 总结知识点:BASE64,ROT13 0x00 Base64 什么是Base64? Base64编码原理 其用途 什么是Base64? Base64是一种基于64个可打印字 ...