angular+directive指令封装

一、项目依赖（路由、过滤器、指令、服务等）

var app = angular.module('qinYuan', ['ngRoute', 'qinyuanFilters', 'qinyuanDirective', 'QYtable']).config(function() {});  

二、设置语法

var directiveModule = angular.module('qinyuanDirective', []);
directiveModule.directive("citys", function($timeout) {
    return {
        restrict: 'AE',    
        //限定指令能用作什么，常用的是'AE'   其中：A(属性),E(元素),M(注释),C(样式类)
        templateUrl: "pages/common/city.html",   //通过文件作模板:
       template:"
这是放置代码
"，//直接模块
       scope:{}
       //解决跨域问题，就算里面无值，最好也写上去
          link: function(scope, elem, attrs) {
          
        }
    }
})

三、directive与controller的交互

app.controller('ctrl',function($scope){     //所在页面对应的控制器中
    $scope.alert = function(a){
        alert(a);
    }
})

app.directive('check',function(){           //指令中调用click
    return{
        restrict:'AE',
        link:function(scope,element,attr){
            element.bind('click',function(){
                 scope.alert(this.innerHTML);
            })
        }
    }
})

 

四、directive间的交互

.directive("b",function(){
   return {
    restrict:'AE',
    controller:function($scope,$element,$attrs,$transclude){
    $scope.name="alex",
    this.alert=function(a){
           alert(a)    
    }
  }
}
})


.directive("a",function(){
   return {
    restrict:'AE',
    require:"^b",  //引入其他指令
    link:function(scope,element,attrs,bCtrl){
         bCtrl.alert(scope.name)
    } 
}
})