本文共计533个文字，预计阅读时间需要3分钟。
AngularDirective.js 指令调用方法：如多出引用时，可在传递值时递归一个JSON对象来展示窗口内容。
angularDirective.js
/**
* 调用此指令的方法:
*
*
*
* 如果多出引用此指令，可以在传值的时候传递一个JSON对象过来用于显示窗口内容
*/
(function() {
angular.module("app.core")
.directive('oneName', function($q, $http, ENV, RequestUrls) {
return {
restrict: 'EA', //可以通过以下方式来调用指令:E(元素),A(属性),C(类),M(注释)
template: '
',
replace: true,
scope: {
icon: '@icon', //图标
radius: '@radius', //半径
image: '@image', //图片
right: '@right',
lineHeight: '@lineHeight',
fontSize: '@fontSize',
color: '@color',
background: '@background', //可以给styleTwo用
},
transclude: true, //如果不想让指令内部的内容被模板替换，可以设置这个值为true
link: function(scope, element, attr) { //链接函数负责注册DOM事件和更新DOM
scope.styleOne = {
"width": scope.radius + "px",
"height": scope.radius + "px",
"-moz-border-radius": scope.radius / 2 + "px",
"-webkit-border-radius": scope.radius / 2 + "px",
"border-radius": scope.radius / 2 + "px",
"margin-right": scope.right + "px",
"line-height": scope.lineHeight + "px",
"font-size": scope.fontSize + "px",
"color": scope.color,
"cursor": "pointer", //鼠标放上去是手的图标
};
//弹出框的css参数
scope.styleTwo = {
"border": "1px #0099ff solid",
"height": "180px",
"width": "300px",
"color": "black",
"background": "white",
"margin-top": "10px",
"margin-left": "-120px",
"position": "absolute",
"z-index": "9999",
};
scope.showDetail = false; //窗体是否可见ng-if
scope.systemMessages = [];
scope.systemMessagesLength = 0;
scope.openShowDetail = function() {
//鼠标进入和移除都调用的此方法，到时候需要判断事件后决定是否调用获取数据的方法
//鼠标焦点事件,此处改变ng-if
//调用获取数据的接口
var params = { //准备参数
"page": 1,
"size": 10
};
requestData(params).success(function(data) { //调用了下面那个方法
if (data.code === 'SUCCESS') {
scope.systemMessagesLength = data.data.total;
scope.systemMessages = data.data.list;
console.log(data);
} else {
console.log(data);
}
}).error(function(data) {
console.log(data);
alert("无法获取消息,请重试");
});
//显示框体
scope.showDetail = !scope.showDetail;
};
//暂时写的替代factory.js的方法
var requestData = function(params) {
//异步
var deferred = $q.defer();
var promise = deferred.promise;
$http.post(ENV.host + RequestUrls.systemMessageQuery, params, ENV.headers)
.success(function(data) {
if (data.code === 'SUCCESS') {
deferred.resolve(data);
} else {
deferred.resolve(data);
}
}).error(function(data) {
deferred.reject(data);
});
promise.success = function(fn) {
promise.then(fn);
return promise;
};
promise.error = function(fn) {
promise.then(null, fn);
return promise;
};
return promise;
};
}
}
});
})();
