前提：
1.在填写表单操作时，可能需要多次使用同一个自定义指令，并且每次请求后台的接口都不一样，
这里用自定义树形结构指令为例，使用ztree插件
2.项目中多次使用模态框，故将模态框也封装成指令
3.把ztree指令放到模态框中，一起封装成指令
代码：
ztreeDirective.js 将ztree插件封装成指令
var app = angular.module('myapp', []);
app.directive('ztree', ztreeDirective);
ztreeDirective.$inject = ['$http'];
function ztreeDirective($http) {
return {
restrict: "AE",
scope: {
ztreedata: '=?',
ztreeid: '@?'
},
controller:function($scope, $element, $attrs){
$scope.newId = "treePermission"+$scope.ztreeid;
/** 这里定义需要的ztree提供的方法，和异步请求*/
}
template:"<form class="form-inline">
<div class="form-group ztree-form">
<div class="has-feedback">
<input type="text" id="key" value="" class="form-control" placeholder="搜索">
</div>
<div class="left">
<ul id="{{newId}}" class="ztree"></ul>
</div>
</div>
</form>"
这里的template里面写法不对，我用的templateUrl，这不是重点就不改了。
由于ztree在渲染的时候，是通过调用id来写入的，所以避免出现操作一个指令时，另一个也跟着变，
我们把id做成动态id——
$scope.newId = "treePermission"+$scope.ztreeid;<ul id="{{newId}}" class="ztree"></ul>alertModalDirective.js 将模态框封装成指令
app.directive('alertModal', function () {
return {
restrict: 'AE',
transclude: true,
scope: {
openModal: '=?',
alertmodal: '=?'
},
controller: function ($scope) {
$scope.alertmodal.button1 || ($scope.alertmodal.button1 = "关闭");
$scope.alertmodal.button2 || ($scope.alertmodal.button2 = "确认")
$scope.openModal = function () {
$('#alertModal').modal('show');
};
$scope.alertmodal.hideModal = function () {
$('#alertModal').modal('hide');
}
},
link: function (scope, element, attr) {},
templateUrl: '<div class="modal fade" id="alertModal">
<div class="modal-dialog" ng-class="{true:'largeWidth'}[alertmodal.isMax]">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="closeModal()"
ng-class="{true:'hide'}[alertmodal.hideClose]"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{alertmodal.mtitle}}</h4>
</div>
<div class="modal-body">
<div ng-transclude></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="alertmodal.closeModal()" data-dismiss="modal"
ng-class="{true:'hide'}[alertmodal.hideClose]">{{alertmodal.button1}}</button>
<button type="button" class="btn btn-primary" ng-click="alertmodal.confirm(alertmodal.data)"
ng-class="{true:'hide'}[alertmodal.hideSubmit]">{{alertmodal.button2}}</button>
</div>
</div>
</div>
</div>'
}
})这里的所有包括模态框的大小，每个按钮的名字都是可配的。
下面就把ztree装在模态框里：
treeModalDirective.js 注意需要把ztreeDirective.js和alertModalDirective.js引进来
app.directive('treeModal', treeModelDirective);
treeModelDirective.$inject = ['$http'];
function treeModelDirective($http) {
return {
restrict: "AE",
scope: {
ztreemodal: "=?",
openmodal:"=?",
},
controller: function ($scope) {
$scope.ztreedata = { //为ztreeDirective.js传值
action: function (data) {//点击树时回调方法
$scope.ztreedata.tree = data;
$scope.ztreedata.get.data = $scope.ztreemodal.ztreedata//
$scope.ztreedata.get.data.id = data.id;//
},
tree: "",
get: {
url: $scope.ztreemodal.ztreeurl,//
data: $scope.ztreemodal.ztreedata,//
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
},
};
$scope.alertmodal = { //为alertModalDirective.js传值
mtitle: "选择树",
// button1 : "",
// button2 : "上传",
isMax: false,//上传文件需要使用大模态框
// hideSubmit : true,//是否隐藏确认按钮，默认false
// hideClose : true,
confirm: function (data) { //点击确定按钮时 回调函数
$scope.$emit($scope.ztreemodal.ztreeid,$scope.data); //通过对应的id向上广播
$scope.alertmodal.hideModal();
}
};
//ztreeDirective.js中定义的ztree插件提供的点击事件回调方法，点击时返回值，
$scope.$on("treeData", function (event, data) {
$scope.data = data.treeObj;
});
$scope.openmodal = function(){
$scope.openAlertModal();//打开模态框
}
},
link: function (scope, element, attrs) {},
templateUrl: '<div alert-modal alertmodal="alertmodal" open-modal="openAlertModal">//模态框指令
<div class="ztreeModal">
<span ztree ztreedata="ztreedata" ztreeid="{{ztreemodal.ztreeid}}"></span>//树指令
</div>
</div>'
}
}OK!
这样一个包含树形结构的模态框就封装好了！ 下面就是正常使用了，
首先是在listController.js中传入两个getUrl，分别是getTreeUser.json和getTreeDepartment.json
这里获取指令的返回数据需要通过广播$emit/$on实现
app.controller('listController', ['$scope', '$location',
function ($scope, $location) {
$scope.ztreemodal1 = {
ztreeurl:"/getTreeUser.json", //访问路径
ztreedata:{ data: "data"}, //传参
ztreeid:"ztree1", //为不同的ztree赋id
}
$scope.$on($scope.ztreemodal1.ztreeid, function (event, data) {//根据所赋的ztreeid作为指令的关键字
$scope.tree1 = data;
});
$scope.ztreemodal2 = {
ztreeurl:"/getTreeDepartment.json", //访问路径
ztreedata:{ data: "data"}, //传参
ztreeid:"ztree2", //为不同的ztree赋id
}
$scope.$on($scope.ztreemodal2.ztreeid, function (event, data) {//根据所赋的ztreeid作为指令的关键字
$scope.tree2 = data;
});
}]);对应的list.html
<div class="container-fluid">
<form class="form-horizontal" name="tree" id="tree">
<div class="row">
<label class="control-label col-sm-3" for="name">选择树</label>
<div class="col-sm-4">
<input type="text" name="name" id="name" class="form-control" ng-model="vm.tree.name">
<a href="" type="button" ng-click="openAlertModal1()">点我吧！</a>
<div class="ztreeInput">//调整样式
<div tree-modal ztreemodal="ztreemodal1" openmodal="openAlertModal1"></div>
</div>
<div class="ztreeInput">
<div tree-modal ztreemodal="ztreemodal2" openmodal="openAlertModal2"></div>
</div>
</div>
</div>
</form>
</div>版权声明：本文为m0_37294104原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。