angularjs 给封装的模态框元素传值，和实现兄弟传值

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本例实现封装的元素所放的位置不同，而选择不同的传值，这里举例封装了bootstrap模态框，以后也方便大家去直接使用。方法举例如下：
首先主页调用css/js有：

模态框html页面代码：

<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>

</body>

说明：循环打印数组，点击子元素。将子元素对象值n，传入gk()方法中，触发模态框展示子元素的值。

js部分如下：

控制器代码如下：

定义封装元素：

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代码如下：