AngularJS：element.show（）指令中不工作 [英] AngularJS: element.show() in directive not working

问题描述

我有一个指令（看到普拉克）一个包装一个div风格显示：无和一秒后显示其内容。我试图使其与element.show（）和$（元素）.show（）（包括jQuery的）显示，但它从来没有工作。超时工作的，有什么不对的code？

这是HTML：

 ＆LT; hideme＆GT;
      后一秒显示此
    ＆LT; / hideme＆GT;
 

这是JavaScript：

  angular.module（应用程序，[]）;功能MyCtrl（$范围）{}angular.module（应用程序）。指令（hideme'，函数（$超时）{    返回{        限制：'E'，
        模板：'＆LT; D​​IV的风格=显示：无重要＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            $超时（函数（）{
                  element.show（）;
            }，1000）;
        }
   };
}）;
 

解决方案

Plunker： HTTP ：？//plnkr.co/edit/bzhCwjXdll3ibxc7qsMY p = preVIEW

请尝试使用transclude：true，然后NG-transclude显示自定义元素标记之间的标记。此外，我不知道如何使用显示（），这样反而组HTML NG秀='showEl'和超时定义showEl =真。

  angular.module（应用程序，[]）;功能MyCtrl（$范围）{}angular.module（应用程序）。指令（hideme'，函数（$超时）{    返回{
          transclude：真实，
        限制：'E'，
        模板：'＆LT; D​​IV NG秀=showEl＆GT;＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            $超时（函数（）{
                  scope.showEl = TRUE;
              }，1000）;
        }
    };
}）;
 

I have a directive (see plunk) that wraps a DIV with style display:none and after one second shows its content. I tried to make it display with element.show() and $(element).show() (including jQuery) but it never worked. The timeout works, what's wrong with this code?

This is the HTML:

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

and this is the 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);
        }
   };
});

解决方案

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

Try using transclude:true and then ng-transclude to display the markup between custom element tags. Also, I'm not familiar with using show(), so instead set html ng-show='showEl' and define showEl = true in the timeout.

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);
        }
    };
});

这篇关于AngularJS：element.show（）指令中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！