代码之家 › 专栏 › 技术社区 › KingKongFrog

如何编写一个angularjs指令来增加呈现该元素的延迟?

angularjs

KingKongFrog · 技术社区 · 7 年前

<div my-directive>
     Hello - show after 1 second.
</div>

angular.module('myapp').directive('myDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

        }
    }
})

3 回复 | 直到 7 年前

Majesty 7 年前

我不认为可以直接访问渲染过程,尽管您可以手动显示或隐藏元素

angular.module('myapp').directive('myDirective', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          element.hide();            // hide on load
          $timeout(function() {
             element.show();         // show after delay
          }, 1000)
        }
    }
})

Pawan Kotak 7 年前

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script  >
    angular.module('myapp',[]);
        angular.module('myapp').directive('myDirective', function () {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    element.css("display", "none");
                    setTimeout(function(){ element.css("display", "block"); }, 1000);
                }
            }
        })
    </script>

</head>

<body ng-app="myapp">
    Start
    <div my-directive>
        Hello - show after 1 second.
    </div>

    <script src="" async defer></script>
</body>

</html>

Deep 7 年前

使用scope变量和timeout可以延迟元素的呈现 ng if在指令的子元素中。

希望这有帮助。

var app = angular.module("myapp", []); 
app.directive('myDirective',  function( $timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
         $timeout(function() {
            scope.show = true;
         }, 1000);
        }
    }
});

app.controller("myCtrl", function($scope) {
    $scope.show = false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myapp" ng-controller="myCtrl">
  <div my-directive>
   <div ng-if="show">
     Hello - show after 1 second.
    </div>
</div>
</div>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

8 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

8 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前