AngularJS 笔记三(自定义指令directive)

第一种自定义指令

var myModule = angular.module(...); 
myModule.directive('directiveName', function factory(injectables) { 
 var directiveDefinitionObject = { 
 　　priority: 0,  //指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行
 　　terminal: false, //若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行) 
 　　template: '<div></div>', 
 　　templateUrl: 'directive.html', 
 　　replace: false, 
 　　transclude: false, //如果不想让指令内部的内容被模板替换，可以设置这个值为true。一般情况下需要和ngTransclude指令一起使用
 　　restrict: 'A', //指明DOM里面以什么形式被声明；默认为A---E(元素),A(属性),C(类),M(注释)
 　　scope: false, //1）默认值false。表示继承父作用域; （2）true。表示继承父作用域，并创建自己的作用域（子作用域）; 3）{}。表示创建一个全新的隔离作用域； 
 　　compile: function compile(tElement, tAttrs, transclude) { 
 　　　 return { 
 　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { }, 
 　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { } 
　　　　} 
　　}, 
　　controller:["$scope",'$element',function($scope,$element){}],
 　 link: function postLink(scope, iElement, iAttrs) { } //链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的，它也是大部分指令逻辑代码编写的地方。 
}; 
 return directiveDefinitionObject; 
}); 

scope 作用域的使用

//前缀标识符
// @  单项绑定的前缀标识符,使用方法：在元素中使用属性
···
angular.module('app',[]).directive('mydirective', function(){
    return {
        restrict: 'AE',
        scope: {name: '@myName'},
        ···
    }
})
// 注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
<div my-directive my-name="{{name}}"></div>
// =  双向数据绑定前缀标识符;使用方法：在元素中使用属性
···
angular.module('app',[]).directive('mydirective', function(){
    return {
        restrict: 'AE',
        scope: {age: '=age'},
        ···
    }
})
// 注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。
<div my-directive age="age"></div>

// <  单项绑定的前缀标识符，和=使用类似。不同的是改变内部scope不会反映到parent的scope；使用方法：在元素中使用属性，
directive的定义scope: { localModel:'<myAttr' }
<my-component my-attr="parentModel">,

// & 绑定函数方法的前缀标识符使用方法：在元素中使用属性，好比这样

angular.module('app',[]).directive('mydirective', function(){
    return {
        restrict: 'AE',
        scope: {changeAge: '&changeMyAge'},
        ···
    }
})
//注意，属性的名字要用-将多个个单词连接。
<div my-directive change-my-age="changeAge()"></div>

第二种自定义指令

(function(){
    'use strict';
    angular.module("citySelectModule",[])
    .directive("citySelect",[function(){ return { restrict:'E', //使用元素的形式声明 <city-select></city-select> scope:{ //隔离作用域 = 双向数据绑定前缀标志符 cityVo : '=' , hidePleaseSelect :'=' , changeProvince : '=' , changeCity : '=' , isDisabled : '=' }, templateUrl:'../static/citySelect.html', controller: ["$scope","$http",'cityService',function($scope,$http,cityService){ // 获取城市 var getCity = function(){ cityService.listProvinceAllCitiesDTO(-1).then(function(data){ if(data.result){ $scope.allCityList = data.list ;  initCity(); } }) } getCity(); //初始化城市 var initCity = function(){ if($scope.cityVo.cityId){ angular.forEach($scope.allCityList,function(provinceItem){ angular.forEach(provinceItem.cityList,function(cityItem){ if($scope.cityVo.cityId == cityItem.id){ $scope.cityVo.provinceObj = {} ; $scope.cityVo.provinceObj.province =cityItem.province ; $scope.cityVo.provinceObj.cityList = provinceItem.cityList ; } }) }) } } //选择市触发 $scope.getCityObj = function(cityId){ if(cityId){ $scope.cityVo.cityObj = cityService.getCityObjByCityId(cityId); } } }] } }])
    /**
     * 城市服务
     */
    .service("cityService",['$http','$q',function($http,$q){ this.listProvinceAllCitiesDTO = function(cityMode){ return $q(function (resolve, reject) { //$q 为promise机制 $http({ method: 'get', url: 'listProvinceAllCitiesDTO/' + cityMode, }).success(function (data) { resolve(data) }).error(function (data) { reject(data.message); }); }); } }])
}());