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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
-
ASP.NET MVC 伪静态的实现
public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.Ignore ...
-
map的应用
1.map最基本的构造函数: map<string , int >mapstring; map<int ,string >mapint; map&l ...
-
[ext4]06 磁盘布局 - 特殊inode
Ext4预留了一些inode做特殊特性使用,见下表: inode Purpose 0 不存在,Ext4中不存在inode 0. 1 存放损坏的数据块链表 2 根目录 3 User quota. 用户q ...
-
SQL Server The target database (&#39;db&#39;) is in an availability group and currently does not allow read only connections. For more information about application intent, see SQL Server Books Online.
一.问题概述 在错误日志中看到非常多的alwayson群集只读连接错误,错误信息的描述为“目标数据库位于可用性组,当前不允许通过read only连接”.错误日志如下: 当前的业务系统使用监听ip对数 ...
-
spring-boot-starter-thymeleaf 避坑指南
第一步:pom配置环境 先不要管包是做什么的 总之必须要有 否则进坑 <!--避坑包--> <dependency> <groupId>net.sourceforg ...
-
OSI七层模型和TCP/IP四层模型
1)网络层负责点到点的传输(这里的“点”指主机或路由器),而传输层负责端到端的传输(这里的“端”指应用进程) 2)ARP协议介于数据链路层和网络层之间(IPv4专有,IPv6的地址映射功能在ICMPv ...
-
QTP图片验证/图片比较/二进制流对比法
图片验证主要是文件对比,其中我们可以利用二进制的方法读取图片信息,然后进行对比,达到对比的效果,本例子利用fso对象的文件流的方法实现,代码如下: Public Function CompareFil ...
-
日期时间类——Java常用类
时间戳(timestamp):距离特定时间的间隔. 计算机中的时间戳是指距离历元(1970-01-01 00:00:00:000)的时间间隔(ms). 格林尼治时间(GMT):是一个标准时间,用于全球 ...
-
BZOJ 1051 受欢迎的牛 缩点
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1051 题目大意: 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数( ...
-
Oracle sql语句中不支持boolean类型（decode&;case）
[转自] http://blog.****.net/t0nsha/article/details/7828538 Oracle sql语句中不支持boolean类型(decode&case) ...