您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

AngularJS的directive(指令)配置选项说明--Java学习网

时间:2016-9-9 7:50:13

  核心提示:js代码如下: var appModule = angular.module('appModule', []);appModule.controller('Ctrl', ['$scope', '$ti...
js代码如下:
 

var appModule = angular.module("appModule", []);
appModule.controller("Ctrl", ["$scope", "$timeout", function($scope, $timeout) {
    $scope.naomi = { name: "Naomi", address: "1600 Amphitheatre" };
    $scope.igor = { name: "Igor", address: "123 Somewhere" };
    $scope.vojta = { name: "Vojta", address: "3456 Somewhere Else" };
    $scope.format = "M/d/yy h:mm:ss a";
    $scope.name = "Tobias";
    $scope.hideDialog = function () {
        $scope.dialogIsHidden = true;
        $timeout(function () {
            $scope.dialogIsHidden = false;
        }, 2000);
    };
}]);
appModule.directive('myTabs', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: function($scope) {
            var panes = $scope.panes = [];

            $scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            };

            this.addPane = function(pane) {
                if (panes.length == 0) {
                    $scope.select(pane);
                }
                panes.push(pane);
            };
        },
        templateUrl: 'my-tabs.html'
    };
});
appModule.directive('myPane', function() {
    return {
        require: '^myTabs',
        restrict: 'E',
        transclude: true,
        scope: {
            title: '@'
        },
        link: function(scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
        },
        templateUrl: 'my-pane.html'
    };
});
appModule.directive("myDraggable", ["$document", function($document) {
    return function(scope, elem, attrs) {
        var startX = 0, startY = 0, x = 0, y = 0;
        elem.css({
            position: "relative",
            border: "1px solid red",
            backgroundColor: "lightgrey",
            cursor: "pointer"
        });
        elem.on("mousedown", function(event) {
            // 组织所选对象的默认拖曳操作
            event.preventDefault();
            startX = event.pageX - x;
            startY = event.pageY - y;
            $document.on("mousemove", mousemove);
            $document.on("mouseup", mouseup);
        });
        function mousemove(event) {
            y = event.pageY - startY;
            x = event.pageX - startX;
            elem.css({
                top: y + "px",
                left:  x + "px"
            });
        }
        function mouseup() {
            $document.off("mousemove", mousemove);
            $document.off("mouseup", mouseup);
        }
    }
}]);
appModule.directive("myDialog", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: {
            "close": "&onClose"
        },
        templateUrl: "my-dialog.html",
        link: function (scope, ele, attrs) {
            scope.name = "Jeff";
        }
    };
});
appModule.directive("myCustomer", [function() {
    return {
        restrict: "E",
        scope: {
            customerInfo: "=info"
        },
        transclude: true,
        template: "",
        templateUrl: "tpls.html",
        link: function(scope, element, attrs) {

        }
    };
}]);
appModule.directive("myCurrentTime", ["$timeout", "dateFilter", function($timeout, dateFilter) {
    return {
        link: function (scope, element, attrs) {
            var format, timeoutId;
            function updateTime() {
                //使用内置dateFilter服务
                element.text(dateFilter(new Date(), format));
                //使用内置$filter服务
                //element.text($filter("date")(new Date(), format));
            }
            scope.$watch(attrs.myCurrentTime, function(value) {
                format = value;
                updateTime();
            });
            function scheduleUpdate() {
                timeoutId = $timeout(function() {
                    updateTime();
                    scheduleUpdate();
                }, 1000);
            }
            element.on("$destroy", function() {
                $timeout.cancel(timeoutId);
            });
            scheduleUpdate();
        }
    }
}]);

创建指令

     最佳实践: 尽量返回一个对象,而不要只返回一个函数。为了防止与未来的标准冲突,最好是前缀化你自己的指令名字。
require
    当指令使用这个选项,$compile服务会查找一个名叫myTabs的控制器,如果没有找到,就会抛出一个错误。该选项的值可以分别用前缀?^?^进行修饰,也可以不修饰。使用^前缀意味着指令将会在它的父元素上面搜索控制器,使用?前缀就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数,如果将?^结合起来,我们就可以既指定上游指令,又可以在找不到时,不抛出严重的错误。没有前缀修饰,指令默认只在所属元素上搜索指定的控制器。

restrict

   该选项指定创建指令的方式,创建方式有E(元素),A(属性),C(类名),M(注释),因此可以取值"E","EA","EAC","EACM"等等。最佳实践:最好通过标签名和属性来使用指令而不要通过注释和类名。这样做可以更容易地看出一个元素是跟哪个指令匹配的。通常注释式命名式指令使用在如下情景:某些指令需要跨越多个元素,但是受DOM API的限制,无法跨越多个元素(比如<table>元素)。 AngularJS 1.2 引入了ng-repeat-start和ng-repeat-end指令,作为更好的解决方案。 建议开发者使用这种方式,而不要用“自定义注释”形式的指令。什么情况下该用元素名,什么情况下该用属性名? 当创建一个含有自己模板的组件的时候,建议使用元素名,常见情况是,当你想为你的模板创建一个DSL(特定领域语言)的时候。如果仅仅想为已有的元素添加功能,建议使用属性名。

scope
       该选项给指令创建独立作用域。如果指令没有创建独立作用域,那么指令在给定的作用域内仅能使用一次,要重用该指令就必须为它新创建一个控制器。最佳实践:如果要使你的组件在应用范围内可重用,那么使用scope选项去创建一个独立作用域。如上代码所示,customerInfo对应为指令独立作用域里的customerInfo属性,值('=info')告诉$compile这里绑定了所在元素的info属性,而info属性就可绑定父作用域的属性,即可达到指令内部作用域与父作用域通信的目的。注意: 指令作用域选项中的'=attr'属性名是被规范化过后的名字. 比如要绑定<div bind-to-this="thing">,你就要使用'=bindToThis'的绑定。scope的绑定策略:=代表与父作用域中的属性双向绑定,@代表把当前属性作为字符串传递,也可绑定父作用域的值,&代表传递一个来自父作用域的函数,稍后调用。
template && templateUrl
          指令使用的模版。最佳实践:除非你的模板非常小,否则最好分割成单独的hmtl文件,然后使用templateUrl选项来加载。
link
     指令修改DOM通常是在link选项中,link选项接受一个带有如下签名的函数function link(scope,element,attrs,ctrls) {...} 其中: scope是一个Angular的scope对象.,element 指令匹配的jqLite封装的元素(angular内部实现的类jquery的库) ,attrs 是一个带有规范化后属性名字和相应值的对象,ctrls是指令依赖的所有控制器集合。被angular编译过的DOM元素被移除的时候, 它会触发一个$destroy 事件。最佳实践: 指令应该自己管理自身分配的内存。当指令被移除时, 你可以使用element.on('$destroy', ...) scope.$on('$destroy', ...)来执行一个清理的工作。
transclude    
          该选项使得指令所包裹的内容能够访问指令外部的作用域。最佳实践: 仅当你要创建一个包裹任意内容的指令的时候使用transclude: true。
controller
    该选项可为指令定义一个控制器,然后其它指令通过require去查找这个控制器,并将该控制器的示例作为link函数第四个参数进行调用。

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
本类固顶
  • 没有
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号