angularjs 给封装的模态框元素传值，和实现兄弟传值
本例实现封装的元素所放的位置不同，而选择不同的传值，这里举例封装了bootstrap模态框，以后也方便大家去直接使用。方法举例如下：
首先主页调用css/js有：
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
模态框html页面代码：
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">公告</h4>
</div>
<div class="modal-body" style="height: 360px">
<div style=" height: 320px;width: 100%">
<p style="height:20px;font-size: 20px;text-align: center;"> {{mdata.title}}</p>
<div style="max-height: 300px;overflow: overlay;">{{mdata.content}}</div>
</div>
<div style="float: right; height: 20px; ">发布时间：{{mdata.time}} </div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
说明：这是模态框代码，保存方式是单另的html页面，其中需要得到的值为mdata这个对象值。
现在先实现第一种方式：就是调用的封装元素<notices>在控制器myCtrl内部范围，建议大家用这种方式。另一种方式是不在范围内的情况，我这里先注释，后面讲解。
主页html：
<body ng-app="myApp">
<div ng-controller="myCtrl" style="height: 200px;width: 300px;margin: 100px auto">
<div ng-repeat="n in arrys" >
<div ng-click="gk(n)" style="background: red;margin:2px " data-toggle="modal"
data-target="#myModal">{{n.title}}</div>
</div>
<notices ></notices>
</div>
<!-- <notices ></notices>-->
</body>
说明：循环打印数组，点击子元素。将子元素对象值n，传入gk()方法中，触发模态框展示子元素的值。
js部分如下：
控制器代码如下：
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope',function($scope) {
$scope.arrys=[{"title":"1aa","content":"1111","time":"2017"},{"title":"2bb","content":"2222","time":"2017"}];
$scope.gk=function(n){ //点击触发事件 ,传值为n
$scope.ntdata=n;
}
}]);
定义封装元素：
app.directive('notices',function () {
return {
restrict: 'E',// 封装成Element（元素）类型
templateUrl: './test1/model.html',// 模板路径
replace: false,
link: function ($scope,element, attrs) {
$scope.$watch("ntdata",function(newValue,oldValue, $scope) {
$scope.mdata = $scope.ntdata;// 点击对象
}, true);
}
}
});
这里非常值得注意的是：templateUrl: 的文件路径问题，该文件是你所要封装的文件，这里我封装的模态框文件名是model.html,一定保证能访问到你所要封装文件的路径。当然你也可以用字符串拼接元素方法分装定义元素。
link方法是作用于你的封装的元素范围，相当于你的控制器方法。在其中只需要用$scope.$watch 这个监听方法，就能接收到点击事件的值。
因为我是用事件触发而去传值，所以需要监听，若是需求是将已有的值直接传入，则只需要在元素<notices name="传的值" ></notices>属性赋值方式传入，在link中接受时只需要用$scope.mdata=attrs.name就可以接受到。
第二种方式，放开注释的不在控制器范围内的元素，变成了兄弟传值方式。
这种情况，用上面方法，你会发现监听不到值，因为值不在作用域范围了。需要定义个service方法间接的去传递对象值。
js代码如下：
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope','ntService',function($scope,ntService) {
$scope.arrys=[{"title":"1aa","content":"1111","time":"2017"},{"title":"2bb","content":"2222","time":"2017"}]
$scope.gk=function(n){ //点击触发事件，传值为n
$scope.ntdata=n;
if($scope.ntdata){
ntService.dmemo=$scope.ntdata;
}
}
}]);
app.service('ntService',function(){
this.dmemo={};
});
app.directive('notices',['ntService','$interval', function (ntService,$interval) {
return {
restrict: 'E',// 封装成Element（元素）类型
templateUrl: './test1/model.html',// 模板路径
replace: false,
link: function ($scope,element, attrs) {
var timer = $interval(function(){
$scope.mdata=ntService.dmemo;
},500);
}
}
}]);
没找到相关兄弟元素直接相互传值的方式，所以用service也是极为简单方便的的一种方式。通过注入的方式，分别注入到2个控制器中，在link中，本例采用了通过时间定时器$interval监听service值得变化。
本文属作者原创，如有转载，请标明文章出处：http://www.cnblogs.com/mobeisanghai/p/7489156.html
作者：漠北桑海
angularjs 给封装的模态框元素传值，和实现兄弟传值的更多相关文章
- Bootstrap 模态框（Modal）插件数据传值
原文:http://blog.csdn.net/baalhuo/article/details/51178154 模态框具体代码如下: <!-- 模态框(Modal) --> <di ...
- Bootstrap 模态框（Modal）带参数传值实例
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现 ...
- fastadmin模态框（弹出框）
用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...
- 每日质量NPM包模态框_react-modal
一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...
- angularJs解决模态框下echarts不显示问题
例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...
- angularJS使用rootscope创建父域和子模态框通用的属性与函数
1. 在声明创建controller指明引用$rootscope reviewInterfaceDo.controller('reviewInterfaceDo', function($scope, ...
- 教你使用HTML5原生对话框元素，轻松创建模态框组件
HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...
- angularjs 简易模态框
angularjs 简易模态框 angularjs 中的模态框一般使用插件angular-ui-bootstrap书写. 这里记录一种简易的模态框写法: 1.警告消息框alert: 原理: 在html ...
- bootstrap3-dialog：更强大、更灵活的模态框（封装好的模态框）
用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...
随机推荐
- 关于js赋值给input解析
<script type="text/javascript"> //关于js中取值问题 $(function(){ //定义function函数 var firstDa ...
- 读书笔记-你不知道的JS上-混入与原型
继承 mixin混合继承 function mixin(obj1, obj2) { for (var key in obj2) { //重复不复制 if (!(key in obj1)) { obj1 ...
- Python Web框架篇：Django文件上传
上传方式: - Form表单上传文件 - Ajax上传文件 - 基于form表单和iframe自己实现ajax请求 1,创建项目 2,settings配置(注册app01,static路径等等这些)及 ...
- Building roads
Building roads Time Limit: 10000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- YARN作业运行机制
在传统的MapReduce中, Jobtracker同时负责作业调度(将任务调度给对应的tasktracker)和任务进度管理(监控任务, 重启失败的或者速度比较慢的任务等). YARN中将Jobtr ...
- Android模仿iOS iMessages10照片选择器的实现
不知不觉已经接近半年多没有写过博客了,这段时间,也是我刚好毕业走出校园的时间,由于学习工作的原因,一直没有真正静下心来写下些什么东西.这个星期刚入了小米笔记本pro的坑,本着新电脑新生活的理念嘻嘻-- ...
- IOS学习——iphone X的适配
说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了. 首先,啥都不管,先在iPhone X上运行起来看看 ...
- 阿里云RDS SQL Server 2008 R2 使用本地SQL备份文件还原全过程
最近公司准备全面转向阿里云,写了好几个方案,最终决定购买一台ECS和一台RDS搭配使用.开始对阿里的RDS产品陌生,加上公司的数据库文件近20G,诸多担心,生怕产品买来了不能用,给公司造成损失.后来联 ...
- c#关键字及ref和out
最近在写程序时遇到ref,out 参数问题.回头有自习看了看MSDN,才有巩固了基础.我把我的测试程序贴出来,大家分享一下. ref 关键字使参数按引用传递.其效果是,当控制权传递回调用方法时, ...
- Java多线程与并发模型之锁
这是一篇总结Java多线程开发的长文.文章是从Java创建之初就存在的synchronized关键字引入,对Java多线程和并发模型进行了探讨.希望通过此篇内容的解读能帮助Java开发者更好的理清Ja ...