AngularJS: element.show() в директиве не работает

Question

У меня есть директива (see plunk), которая обертывает DIV со стилем display:none и через одну секунду показывает ее содержимое. Я попытался показать его с элементами element.show() и $ (element) .show() (включая jQuery), но он никогда не работал. Тайм-аут работает, что случилось с этим кодом?

Это HTML:

<hideme> 
     Show this after one second 
    </hideme> 

и это JavaScript:

angular.module("app", []); 

function MyCtrl($scope) {} 

angular.module("app").directive('hideme', function($timeout) { 

    return { 

     restrict: 'E', 
     template: '<div style="display: none !important"></div>', 
     link: function(scope, element, attrs) { 
      $timeout(function() { 
        element.show(); 
      }, 1000); 
     } 
    }; 
}); 

Answer 1

Plunker: http://plnkr.co/edit/bzhCwjXdll3ibxc7qsMY?p=preview

Попробуйте использовать transclude: true, а затем ng-transclude для отображения разметки между тегами пользовательских элементов. Кроме того, я не знаком с использованием show(), поэтому вместо этого установите html ng-show = 'showEl' и определим showEl = true в тайм-ауте.

angular.module("app", []); 

function MyCtrl($scope) {} 

angular.module("app").directive('hideme', function($timeout) { 

    return { 
      transclude: true, 
     restrict: 'E', 
     template: '<div ng-show="showEl"><div ng-transclude></div></div>', 
     link: function(scope, element, attrs) { 
      $timeout(function() { 
        scope.showEl = true; 
       }, 1000); 
     } 
    }; 
}); 

Answer 2

Элемент показан, проблема в том, что в нем нет ничего, что можно было бы показать. Кроме того, чтобы иметь функцию show, вам нужно добавить зависимость jQuery и применить ее к правильному div.

angular.module("app", []); 
 

 
function MyCtrl($scope) {} 
 

 
angular.module("app").directive('hideme', function($timeout) { 
 
    return { 
 
    restrict: 'E', 
 
    transclude: true, 
 
    template: '<div style="display: none;"><div ng-transclude></div></div>', 
 
    link: function(scope, element, attrs) { 
 
     $timeout(function() { 
 
     element.find("div:hidden").show(); 
 
     }, 1000) 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <hideme> 
 
    Show me after one second. 
 
    </hideme> 
 
</div>

Это говорит. Я хотел бы сделать это следующим образом:

angular.module("app", []).directive('hideme', function($timeout) { 
 
    return { 
 
    restrict: 'E', 
 
    transclude: true, 
 
    scope: true, 
 
    template: '<div ng-show="show"><div ng-transclude></div></div>', 
 
    link: function(scope, element, attrs) { 
 
     scope.show = false; 
 
     $timeout(function() { 
 
     scope.show = true; 
 
     }, 1000) 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <hideme> 
 
    Show me after one second. 
 
    </hideme> 
 
</div>

Answer 3

1. Шаблон Вставляется в пользовательский тег, поэтому ваш <div> становится дочерний <hideme> тега.

2. В функции связи(), то element аргумента является <hideme> тега - не <div> --therefore в <hideme> восстановлении скрытого тега не отобрази ребенок <div>, который был стилизованным с display: none. Другими словами, если у вас есть это:

   <hideme style="display: block"> <div style="display: none">Show this in three seconds.</div> </hideme>

   , что не будет показывать <div>.

3. Если вы не загружаете jQuery перед загрузкой angularjs, то angularjs использует что-то, что он вызывает jqLite для обертывания элементов. Обернутые элементы действуют как завернутые jQuery наборы, но они имеют уменьшенные функциональные возможности, например. show() и hide() не предоставляются.

Так что, если вы загрузите JQuery, а затем загрузить angularjs, вы можете сделать это:

приложение.ЯШ:

var app = angular.module('myApp', []); 

app.directive('hideMe', ['$timeout', function($timeout) { 
    var directive = {}; 

    directive.restrict = 'E'; 

    directive.link = function(scope, element, attrs) { 
    element.html(
     '<div style="display:none">' 
     + element.text() 
     + '</div>' 
    ); 

    $timeout(function() { 
     element.children().show(); 
    }, 3000); 

    }; 


    return directive; 
}]); 

index.html:

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <!-- For html5 (default is UTF-8) --> 
    <meta charaset="UTF-8"> 
    <!-- For Bootstrap --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>AngularJS Examples</title> 

    <!-- Bootstrap CSS --> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <!-- app.css --> 
    <link href="app.css" rel="stylesheet"> 

</head> 

<body class="container"> 

    <hide-me>Show this after three seconds.</hide-me> 



<!-- JQuery 2.1.1 --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<!-- Angular 1.3.3 --> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> 

<!-- app.js --> 
<script src="app.js"></script> 

</body> 
</html> 

Однако я заметил, что кратко на странице текста мигает перед тем, как скрытые. Редактировать: Если я заменил element.text() на element.html(), тогда вспышки нет.

С другой стороны, если вы не загрузить JQuery вы можете сделать это:

var app = angular.module('myApp', []); 

app.directive('hideMe', ['$timeout', function($timeout) { 
    var directive = {}; 

    directive.restrict = 'E'; 

    directive.link = function(scope, element, attrs) { 
    var hideme = element[0]; 
    hideme.innerHTML = '<div style="display:none">' + hideme.innerHTML + '</div>'; 

    $timeout(function() { 
     var div = hideme.childNodes[0]; 
     div.style.display = "block"; 
    }, 3000); 

    }; 


    return directive; 
}]); 

Затем текст не мигает на экране перед прячась.

Answer 4

Функции .hide() и .show() работают только в том случае, если jquery вставлен перед угловым в ваш html-файл.

Gwenn

Answer 5

Вы можете легко использовать только следующие без включения JQuery, чтобы показать элемент:

element.css('display', 'block'); 

И соответствующие скрыть это:

element.css('display', 'none');