angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
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></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 () { //bookList对应view层的book-list
return {
restrict: 'ECAM',
controller: function ($scope) {
$scope.books = [
{
name: 'php'
},
{
name: 'js'
},
{
name: 'java'
}
];
this.addBook = function () {
//$scope.$apply为全局刷新 在更新完model层数据源$scope.books后也要刷新view层显示
$scope.$apply(function () {
$scope.books.push({
name:'iOS'
})
})
}
},
controllerAs: 'bookListController', //起一个别名
template: '<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul><book-add></book-add></div>',
replace: true
}
})
.directive('bookAdd',function () {
return{
restrict:'ECAM',
require:'^bookList',//^代表向上找标签约束<book-add></book-add>
template:'<button type="button">添加</button>',
replace:true,
link:function (scope, iElement, iAttrs, bookListController) {//把controllerAs: 'bookListController' 注入进来
iElement.on('click',bookListController.addBook);
}
}
})
.controller('firstController', ['$scope', function ($scope) {
//代表当前是给firstController服务的
}]);
运行结果:
angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)的更多相关文章
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
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的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- 【python3】爬取鼠绘汉化的海贼王漫画
特别说明: 因为早些时候鼠绘的接口调整,之前的代码已经不能用了. 正好最近在学习scrapy,于是重新写了一个,项目放在github https://github.com/TurboWay/ishu ...
- 洛谷 2953 [USACO09OPEN]牛的数字游戏Cow Digit Game
洛谷 2953 [USACO09OPEN]牛的数字游戏Cow Digit Game 题目描述 Bessie is playing a number game against Farmer John, ...
- 10 ORM 多表操作 查询
1.子查询:基于对象的跨表查询 def query(request): """ 跨表查询: 1.基于对象查询 2.基于双下划线查询 3.聚合.分组查询 4. F Q 查询 ...
- Gitlab+Jenkins学习之路（十一）之Jenkins自动触发构建和发布
思路图: 一.下载gitlab plugin jenkins-->系统管理-->管理插件-->下载并安装gitlab plugin 二.配置gitlab认证 路径:Jenkins-- ...
- 第二章：走进shell
2.2 通过Linux控制台终端访问CLI(command line interface) 打开CLI:control+alt+t 用于设置前景色和背景色的setterm选项 选项 参数 描述 - ...
- 菜鸟vimer成长记——第2.4章、cmd-line模式
cmd-line模式又有3个类型:Ex 命令(ex commands).查找模式(Search patterns).Filter 命令(Filter commands).本文主要重点的是Ex 命令和S ...
- Jmeter关联处理
采桑子·重阳 人生易老天难老, 岁岁重阳. 今又重阳, 战地黄花分外香. 一年一度秋风劲, 不似春光. 胜似春光, 廖廓江天万里霜. 当请求之间有依赖关系,比如一个请求的入参是另一个请求返回的数据,这 ...
- 将jira添加至开机自启动
东北证券网金部jira项目管理系统,经常莫名挂掉,于是乎将jira服务加入开机自启动. jira.sh脚本代码如下: #!/bin/sh # chkconfig: # description:jira ...
- window搭建私有云，只要几分钟
本文介绍如何在window搭建私有云网盘. 工具/原料:一台window系统电脑或者window服务器(vps),Xampp 安装包,可道云kodexplorer安装包 第一步,xampp安装 1.官 ...
- ngxin 添加模块
if test -n "$NGX_ADDONS"; then echo configuring additional modules for ngx_addon_dir in $N ...