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表示的是指令声明的方式.
angular.js自定义指令_第1张图片

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()">

你可能感兴趣的:(angularjs)