angular.js自定义指令

示例代码

.directive('cssTab', ['$compile', function ($compile) {
        return {
            restrict: 'E',
            replace: true,
            scope:{
                tabindex: '@tabindex'
            },
            //require: '?ngModel',
            transclude: true,
            template: '
' +
                            '
' +
                                '
' +
                                   '
地图查询
' +
                                   '
土地查询
' +
                                   '
楼盘查询
' +
                                '
' +
                                '查询' +
                            '
' +
'
' +
'
' +
'
市场分析
' +
'
政策解读
' +
'
' +
'分析
' +
'
询价
' +
'
我的
' +
'
',
controller: function cssTabCtr($scope) {
//console.log($scope.tabindex);
var currenrPage = window.location.href.split("#")[1];
switch (currenrPage) {
case "/home":
$scope.showanalysisquerybox = -1;
break;
case "/enquiry-home":
$scope.showanalysisquerybox = 3;
break;
case "/member-home":
$scope.showanalysisquerybox = 4;
break;
default:
$scope.showanalysisquerybox = -1;
break;
}
$scope.chaTabClick = function () {
$scope.showanalysisquerybox == 1 ? $scope.showanalysisquerybox = -1 : $scope.showanalysisquerybox = 1;
};
$scope.anaTabClick = function () {
$scope.showanalysisquerybox == 2 ? $scope.showanalysisquerybox = -1 : $scope.showanalysisquerybox = 2;
};
$scope.equeryTabClick = function () {
$scope.showanalysisquerybox = 3;
window.location.href = "#/enquiry-home";
};
$scope.myTabClick = function () {
$scope.showanalysisquerybox = 4;
window.location.href = "#/member-home";
};
},
compile: function (element, attr) {
//console.log(1);
//var tabIndex = attr.tabb;
//if (tabIndex) {
// $scope.aa = { "aa": tabIndex };
//};
//var input = element.find('input');
////在作用域没绑定前，修改DOM
//angular.forEach({
// 'ng-model': attr.ngModel
//}, function (value, name) {
// input.attr(name, value);
//});
//return function ($scope, $ele) {
// var tabIndex = attr.tabb;
// if (tabIndex) {
// $scope.aa = { "aa": tabIndex };
// };
//}
}
}
}])

一.指令的属性

1. name
2. priority
3. terminal
4. scope
5. controller
6. require
7. restrict
8. template
9. templateUrl
10. replace
11. transclude
12. compile
13. link

1.name就是指令名

2.priority多个指令设置在同一个元素上的执行优先级,执行顺序从低至高:1>2>3

3.terminal

true/false 如果为true,同一个元素上的其他指令的优先级高于本指令，其他指令将停止执行

4.restrict属性

restrict表示的是指令声明的方式.

5.template和templateUrl

同一个指令中只能template和templateUrl只能选其一。

template为模板内容。即你要在指令所在的容器中插入的html代码。

template属性接收一个字符串，类似这样：

template: '
我是指令生成的内容';

templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。

6.replace和transclude

replace：是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有标签；false ：则append（追加）在当前元素上，即模板的内容包在标签内部。默认false。

transculde：是否使用ng-transculde来包含html中指令包含的原有的内容，接收两个参数true/false

7.指令中的scope

directive 默认能共享父 scope 中定义的属性，例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。

但是，当你要创建一个可以重复使用的directive的时候，就不能依赖于父scope了，因为在不同的地方使用directive对应的父scope不一样。

所以你需要一个隔离的scope，我们可以向下面这样来定义我们的scope。

module1.directive("testDirective", function () {
        return {
            scope: {
                value: '123'
                         },
            template: 'Say:{{value}}'
        }
});       

这样就很方便的将我们directive的上下文scope给定义出来了，但是，如果我想将父scope中的属性传递给directive的scope怎么办呢？

directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互：

• @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
• & 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
• = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

(1)@

app.controller("ctl1", function ($scope) {
        $scope.name = "hello world";
    }).directive("testDirective", function () {
        return {
            scope: {
                name: "@"
            },
            template: 'Say：{{name}} 
改变隔离scope的name："buttom" value="" ng-model="name" class="ng-pristine ng-valid">'
        }
})



<div ng-controller="ctl1">
   <div>
       <div>父scope：
           <div>Say：{{name}}
改变父scope的name："text" value="" ng-model="name"/>div>
       div>
       <div>隔离scope：这个显示为hello world
           <div test-directive name="{{name}}">div>
       div>
        <div>隔离scope（不使用{{name}}这个就直接显示为name了）：
             <div test-directive name="name">div> 
         div>
   div>

(2)=

app.controller("ctl1", function ($scope) {
        $scope.user = {
            name: 'hello',
            id: 1
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                user: "="
            },
            template: 'Say：{{user.name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="user.name"/>'
        }
    })



<div ng-controller="ctl1">
    <div>父scope：
        <div>Say：{{user.name}}<br>改变父scope的name：<input type="text" value="" ng-model="user.name"/>div>
    div>
    <div>隔离scope：
        <div isolated-directive user="user">div>
    div>
    <div>隔离scope（使用{{name}}，这个会报错）：
        <div isolated-directive user="{{user}}">div> 
    div>
div>

(3)&

app.controller("ctl1", function ($scope) {
        $scope.value = "hello world";
        $scope.click = function () {
            $scope.value = Math.random();
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                action: "&"
            },
            template: ''
        }
    })


"ctl1">
        
父scope：
            
Say：{{value}}
        
        
隔离scope：
            
"click()">