本例实现封装的元素所放的位置不同，而选择不同的传值，这里举例封装了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">&times;</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 给封装的模态框元素传值，和实现兄弟传值的更多相关文章

  1. Bootstrap 模态框（Modal）插件数据传值

    原文:http://blog.csdn.net/baalhuo/article/details/51178154 模态框具体代码如下: <!-- 模态框(Modal) --> <di ...

  2. Bootstrap 模态框（Modal）带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现 ...

  3. fastadmin模态框（弹出框）

    用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...

  4. 每日质量NPM包模态框_react-modal

    一.react-modal 官方定义: Accessible modal dialog component for React.JS 理解: 一个容易使用的React模态框组件 二.用法 有时候我们不 ...

  5. angularJs解决模态框下echarts不显示问题

    例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...

  6. angularJS使用rootscope创建父域和子模态框通用的属性与函数

    1. 在声明创建controller指明引用$rootscope reviewInterfaceDo.controller('reviewInterfaceDo', function($scope, ...

  7. 教你使用HTML5原生对话框元素，轻松创建模态框组件

    HTML 5.2草案加入了新的dialog元素.但是是一种实验技术. 以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找 ...

  8. angularjs 简易模态框

    angularjs 简易模态框 angularjs 中的模态框一般使用插件angular-ui-bootstrap书写. 这里记录一种简易的模态框写法: 1.警告消息框alert: 原理: 在html ...

  9. bootstrap3-dialog：更强大、更灵活的模态框（封装好的模态框）

    用过bootstrap框架的同学们都知道,bootstrap自带的模态框用起来很不灵活,可谓鸡肋的很.但nakupanda开源作者封装了一个更强大.更灵活的模态框——bootstrap3-dialog ...

随机推荐

  1. 走进 Xamarin Test Recorder for Xamarin.Forms

    此篇是承接之前 走进 UITest for Xamarin.Forms 的,所以如果没有看过之前的可以先看下之前的 UITest 比起上一篇纯敲代码只适合程序员的 UITest ,这一篇不管是程序员还 ...

  2. 【前端】主流API-promise解析，js基础。

    前言 在js领域,promise出现的时间已经很久了,从jquery的$.get().done().fail() 这样的API开始,到现在的es6默认支持的new Promise(),它的出现无疑使异 ...

  3. 02-从零玩转JavaWeb-类与对象

    配套视频:对象与类 一.什么是对象 包含特性和行为的一个实体   下图当中,"颜色"和"体重"属于"特性或叫状态" "咬人&quo ...

  4. angular指令中@，=，&的区别

    当directive中的scope设置为一个对象的时候,该指令就有了一个独立的作用域,AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信. 1.@(or @attr) 使用@符号可 ...

  5. ssh连接虚拟机失败解决办法

    首先,你需要知道本机IP跟虚拟机IP,然后让两者互相ping一下,看能否ping通 让主机ping虚拟机 :ping (虚拟机ip) 出现如下: 表示主机可以ping通虚拟机 然后让虚拟机ping主机 ...

  6. java三级考试理论题

    Java试卷 一.单项选择题: 1. 试题: 在WINDOWS环境下,ODBC在__A____中设置 A. 控制面板 B. 注册表 C. 浏览器 D. 写字板 2. 阅读以下描述: C <jsp ...

  7. JavaScript系列-----Object之toString()和valueOf()方法 (2)

    深入理解toString()和valueOf()函数 1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可 ...

  8. ［Redis源码阅读］sds字符串实现

    初衷 从开始工作就开始使用Redis,也有一段时间了,但都只是停留在使用阶段,没有往更深的角度探索,每次想读源码都止步在阅读书籍上,因为看完书很快又忘了,这次逼自己先读代码.因为个人觉得写作需要阅读文 ...

  9. Python 直接赋值、浅拷贝和深度拷贝解析

    直接赋值:其实就是对象的引用(别名). 浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象. 深拷贝(deepcopy): copy 模块的 deepcopy 方法,完全拷贝了父对象及其子对象 ...

  10. [转载] 一致性hash算法释义

    转载自http://www.cnblogs.com/haippy/archive/2011/12/10/2282943.html 一致性Hash算法背景 一致性哈希算法在1997年由麻省理工学院的Ka ...