自己使用angular实现html中类似title的功能

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

 };

 };

本文出自 “小李广之博客” 博客，转载请与作者联系！