本文共 3348 字，大约阅读时间需要 11 分钟。

第一种自定义指令

var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) {
     var directiveDefinitionObject = {  　　priority: 0,  //指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行 　　terminal: false, //若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)  　　template: '
   
',  　　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'},        ···    }})// 注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{
   {}}来绑定数据。
   
// =  双向数据绑定前缀标识符;使用方法：在元素中使用属性···angular.module('app',[]).directive('mydirective', function(){
       return {        restrict: 'AE',        scope: {age: '=age'},        ···    }})// 注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{
   {}}。
   
// <  单项绑定的前缀标识符，和=使用类似。不同的是改变内部scope不会反映到parent的scope；使用方法：在元素中使用属性，directive的定义scope: { localModel:'
   
    ,// & 绑定函数方法的前缀标识符使用方法：在元素中使用属性，好比这样angular.module('app',[]).directive('mydirective', function(){
       return {        restrict: 'AE',        scope: {changeAge: '&changeMyAge'},        ···    }})//注意，属性的名字要用-将多个个单词连接。
    
   

第二种自定义指令

(function(){    'use strict';    angular.module("citySelectModule",[])    .directive("citySelect",[function(){ return { restrict:'E', //使用元素的形式声明 
    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); }); }); } }])}());

转载地址：https://blog.csdn.net/snow51/article/details/81084678 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！