前提：
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>