本例實現封裝的元素所放的位置不同，而選擇不同的傳值，這里舉例封裝了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
作者：漠北桑海