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没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- Docker-CE-CentOS安装&更新&卸载
准备工作 系统准备 要求centos-7以上版本(包含7) 开启centos-extras 在线安装方式要求 卸载旧版本 卸载旧版本docker yum remove docker \ docker- ...
- vivado与modelsim的联合仿真
转载: 一.在vivado中设置modelsim(即第三方仿真工具)的安装路径.在vivado菜单中选择“Tools”——>“Options...”,选择“General”选项卡,将滚动条拉倒最 ...
- druid之监控设置及问题小记
druid是什么注不再赘述了.想了解直接参见 https://github.com/alibaba/druid/wiki/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98 本文 ...
- 【轮子狂魔】抛弃IIS，向天借个HttpListener - 基础篇（附带源码）
这一次我们要玩什么? 先声明一下,由于这篇是基础篇主要是通过这篇文章让大家对使用HttpListener响应Http请求有个大概了解,所以正式的花样轮子在下一篇推出,敬请期待 ^_^ 嗯哼,还有,我标 ...
- lua编程之元表与元方法
一. 前言 lua是一种非常轻量的动态类型语言,在1993年由由Roberto Ierusalimschy.Waldemar Celes 和 Luiz Henrique de Figueiredo等人 ...
- 宏基4752g 开机进度条卡到75%左右，解决办法
起因:更新win10推送的更新补丁,失败自动回退.开机进度条只能走到75%,bios进不去,最后就卡在开机的logo.(还有其他人是win7直接升级win10,也出现了这种情况.)解决办法:重刷bio ...
- Altium 中PCB的Gerber生产资料的输出详细步骤
生产文件的输出,俗称Gerber out,Gerber文件是所有电路设计软件都可以产生的文件,在电子组装行业又称为模版文件(Stencil Data),在PCB制造业又称为光绘文件.可以说Gerber ...
- Jmeter性能指标分析
以下是下载了服务器监控插件的各个组件的功能介绍,有助于以后jmeter的性能测试 1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间 ...
- 【 C# 】（一） ------------- 泛型带头节点的单链表，双向链表实现
在编程领域,数据结构与算法向来都是提升编程能力的重点.而一般常见的数据结构是链表,栈,队列,树等.事实上C#也已经封装好了这些数据结构,在头文件 System.Collections.Generic ...
- 使用tensorflow进行mnist数字识别【模型训练+预测+模型保存+模型恢复】
import sys,os sys.path.append(os.pardir) import numpy as np from tensorflow.examples.tutorials.mni ...