1)首先写指令
exports.define = function(md) {
//这个是写的通用的安全使用apply的服务
md.factory(‘safeApply‘, function($rootScope){
return function(scope, fn){
var phase = scope.$root.$$phase;
if(phase == ‘$apply‘ || phase == ‘$digest‘){
if(fn && (typeof (fn) === ‘function‘)){
fn();
}
}else{
scope.$apply(fn);
}
}
});
md.directive(‘showTitleDiv‘,[‘safeApply‘,function(safeApply){
return{
restrict: ‘A‘,
templateUrl: ‘/showTitleDiv.html‘,
scope: {
divobj: ‘=‘
},
link:function(scope, element, attrs){
scope.$watch(‘divobj.top‘, function(){
safeApply(scope, function(){
element.css({‘position‘: ‘absolute‘,
‘top‘ : scope.divobj.top + ‘px‘,
‘left‘: scope.divobj.left + ‘px‘,
‘color‘: ‘#cccccc‘,
‘width‘: scope.divobj.width + ‘px‘,
‘height‘: scope.divobj.height + ‘px‘,
‘background-color‘: ‘#FFF‘,
‘border‘: ‘1px solid #CCC‘,
‘overflow-y‘: ‘auto‘,
‘overflow-x‘: ‘hidden‘
});
})
});
}//return
};
}]);
};
});
2)对应的模板
<div ng-show="divobj.isShow">
<div>层里面的内容...</div>
</div>
3)如何引入指令
在你要调用的页面上添加：<div show-title-div divobj="titlediv"></div>
在页面对应的js中引入指令
define(function(require){
//引用js中定义的常量
var PFConstants = require(‘./productConstants.js‘);
var md = angular.module("xxx",[]);
//引入指令
require(‘./directives/showTitleDivdirective.js‘).define(md);
md.controller(‘xxxCtrl‘,function(){
});
});
4)如何触发指令：
$scope.showtitle = function(index){
//修改层的top和left属性值
$scope.dutydiv ={
top: $(‘#aa‘).position().top+(index*20),
left: $(‘#aa‘).position().left,
width: 350,
height: 250,
isShow: true
};
};
$scope.hidetitle = function(){
$scope.dutydiv ={
top: 0,
left: 0,
width: 0,
height:0,
isShow: false
};
};