• AngularJs自定义指令详解(5)


    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数。

    写法:

    link: function(scope, element, attrs){
          //在这里操作DOM      
    }

    如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器。

    // require 'meController'
    link: function(scope, element, attrs, meController){
       //在这里操作DOM, 可以访问requires指定的控制器
    }

    链接函数之所以能够在指令中操作DOM,就是因为传入的这几个参数:scope、element、attrs

    scope:即与指令元素相关联的当前作用域,可以用来注册监听器:scope.$watch()

    element:即当前指令对应的元素,使用它可以操作该元素及其子元素。例如<span my-directive></span>,这个span就是指令 my-directive所使用的元素。

    attrs:由当前元素的属性组成的对象。

    下面看一个例子,来自官方文档的示例。

    我们要实现一个时钟,根据给定的时间格式显示当前的时间,而且每隔一秒要更新一次时间。

    首先在控制器中初始化一个时间格式:

    controller('Controller', ['$scope', function($scope) {
        $scope.format = 'M/d/yy h:mm:ss a';
    }])

    对于时间格式,显然我们要引入$filter服务。

    对于”每隔一秒“进行某些操作,显然要引入$interval服务。

    为了测试程序,我们还引入$log服务以便在浏览器中观察输出。

    所以自定义的指令需要写成这样:

    directive('myClock', ['$interval', '$filter', '$log', function($interval, $filter,$log)

    这个myClock指令将会被注入$interval、$filter、$log服务。

    刷新时间显示,也就是要求我们在指令中操作DOM,输出时间:

    function updateTime() {
      element.text($filter('date')(new Date(), interFormat));
    }

    $filter方法的使用:

    $filter('date')(date, format, timezone)

    参考https://code.angularjs.org/1.3.16/docs/api/ng/filter/date

    每隔一秒刷新显示:

    $interval(
    
      function() {
        updateTime();
      },
    
      1000
    
    );

    完整代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="../lib/angular-1.3.16/angular.min.js"></script>
        <script src=""></script>
        <title></title>
        <script language="JavaScript">
            angular.module('docsTimeDirective', [])
                    .controller('Controller', ['$scope', function($scope) {
                        $scope.format = 'M/d/yy h:mm:ss a';
                    }])
                    .directive('myClock', ['$interval', '$filter', '$log', function($interval, $filter,$log) {
                        return {
                            scope:{
                                myFormat:'='
                            },
                            link: function(scope, element, attrs) {
                                function updateTime() {
                                    element.text($filter('date')(new Date(), scope.myFormat));
                                }
                                updateTime();
                                $interval(function() {
                                    updateTime();
                                }, 1000);
                            }
                        };
                    }]);
        </script>
    </head>
    <body ng-app="docsTimeDirective">
    <div ng-controller="Controller">
        时间格式: <input ng-model="format"> <hr/>
        当前时间: <span my-clock my-format="format"></span>
    </div>
    </body>
    </html>
  • 相关阅读:
    Cesium深入浅出之视频投影【转】
    前端面试题总结[转]
    Cesium 做汉化的另一种思路。[转]
    Cesium深入浅出之可视域分析【转】
    Python 3's fStrings: An Improved String Formatting Syntax (Guide)
    登录远程主机执行重启服务
    Command "python setup.py egg_info" failed with error code 1 in /tmp/pipbuild*解决办法
    服务器磁盘使用率高做钉钉报警
    Shell 使用 pushd 和 popd实现快速定位
    Let’s Encrypt配置ssl证书自动更新
  • 原文地址:https://www.cnblogs.com/calvin-dong/p/9509689.html
Copyright © 2020-2023  润新知