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
作者:漠北桑海