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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- django的数据库配置-13
数据库配置 打开mysite下的settings.py文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NA ...
- 乘积尾零——第九届蓝桥杯C语言B组（省赛）第三题
原创 标题:乘积尾零 如下的10行数据,每行有10个整数,请你求出它们的乘积的末尾有多少个零? 5650 4542 3554 473 946 4114 3871 9073 90 4329 2758 7 ...
- Golang设计模式—简单工厂模式(Simple Factory Pattern)
Golang设计模式--简单工厂模式 背景 假设我们在做一款小型翻译软件,软件可以将德语.英语.日语都翻译成目标中文,并显示在前端. 思路 我们会有三个具体的语言翻译结构体,或许以后还有更多,但现在分 ...
- Vue 技巧
1.在 v-html 中执行 vue 绑定的事件,默认是不能执行的.这里需要把 html 重新解析一下 loadMsg:function(html){ html = $.parseHTML(html) ...
- 4-[HTML]-body常用标签1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Apache和Nginx比较
Apache和Nginx对比 功能对比 Nginx和Apache一样,都是HTTP服务器软件,在功能实现上都采用模块化结构设计,都支持通用的语言接口,如PHP.Perl.Python等,同时还支持正向 ...
- sqlmap简单中文说明
首先下载需要的文件,如果是windows环境直接到http://sqlmap.org/下载安装所需要的文件即可. 更新 svn checkout https://svn.sqlmap.org/sqlm ...
- BLACKPYTHON学习（一）
C/S结构了解 所谓的C/S就是客户端(client)和服务器端(server)的简称,也就是在基于这个的基础上编写相关的代码:一个就是客户端一个就是服务端. TCP(client) 客户端编写 #因 ...
- android安卓生成密钥keystore（命令控制）
android安卓生成密钥keystore(命令控制) • 配置JDK 详细教程 https://blog.csdn.net/u012934325/article/details/73441617/ ...
- 关于Unity中OnGUI()的简单使用
有时候想要输出一些数据到屏幕上方便查看,新建一个UI对象又挺麻烦,用OnGUI()在屏幕上直接绘制UI比较方便. GUI.Label(, , , ), “aaa", style); 这条语句 ...