angular.js自定义指令

最新推荐文章于 2020-01-20 17:07:14 发布

css_666

最新推荐文章于 2020-01-20 17:07:14 发布

阅读量391

点赞数

分类专栏： angularjs 文章标签： angularjs 指令

本文链接：https://blog.csdn.net/css_666/article/details/78753657

版权

angularjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

示例代码

.directive('cssTab', ['$compile', function ($compile) {
        return {
            restrict: 'E',
            replace: true,
            scope:{
                tabindex: '@tabindex'
            },
            //require: '?ngModel',
            transclude: true,
            template: '<div class="tabs">' +
                            '<div class="home-tab" ng-click="chaTabClick()" ng-class={"tab-on":showanalysisquerybox==1}>' +
                                '<ul class="query-box" id="queryBox" ng-if="showanalysisquerybox==1">' +
                                   '<li class="border-b-gray"><a href="#/home">地图查询</a></li>' +
                                   '<li class="border-b-gray"><a href="#/land-choose">土地查询</a></li>' +
                                   '<li><a href="#/house-choose">楼盘查询</a></li>' +
                                '</ul>' +
                                '<i class="iconfont icon-chaxun"></i><span>查询</span>' +
                            '</div>' +
                            '<div class="home-tab" ng-click="anaTabClick()" ng-class={"tab-on":showanalysisquerybox==2}>' +
                                 '<ul class="query-box" ng-if="showanalysisquerybox==2">' +
                                   '<li class="border-b-gray"><a href="#/analysis-home">市场分析</a></li>' +
                                   '<li><a href="#/home-policyReading">政策解读</a></li>' +
                                 '</ul>' +
                                 '<i class="iconfont icon-fenxi"></i><span>分析</span></div>' +
                            '<div class="home-tab" ng-click="equeryTabClick()" ng-class={"tab-on":showanalysisquerybox==3}><i class="iconfont icon-jiageshuomingicon"></i><span>询价</span></div>' +
                            '<div class="home-tab" ng-click="myTabClick()" ng-class={"tab-on":showanalysisquerybox==4}><i class="iconfont icon-my"></i><span>我的</span></div>' +
                       '</div>',
            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 };
                //    };
                //}
            }
        }
    }])

一.指令的属性

name
priority
terminal
scope
controller
require
restrict
template
templateUrl
replace
transclude
compile
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: '<div>我是指令生成的内容</div>';

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}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">'
        }
})



<div ng-controller="ctl1">
   <div>
       <div>父scope：
           <div>Say：{{name}}<br>改变父scope的name：<input type="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: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>'
        }
    })


<div  ng-controller="ctl1">
        <div>父scope：
            <div>Say：{{value}}</div>
        </div>
        <div>隔离scope：
            <div isolated-directive action="click()"></div>
        </div>
</div>