Javascript 使用AngularJS向DOM追加指令_Javascript_Jquery_Angularjs

Javascript 使用AngularJS向DOM追加指令

javascript jquery angularjs

Javascript 使用AngularJS向DOM追加指令,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我已经阅读了无数关于堆栈溢出的文章/问题，以及文档，但我似乎在任何地方都找不到答案基本上，我有以下指令： angular.module('diDirectives', []). directive('ExampleElement', ['$rootScope', '$timeout', function($rootScope, $timeout) { return { priority: 0, restrict: 'C', temp

我已经阅读了无数关于堆栈溢出的文章/问题，以及文档，但我似乎在任何地方都找不到答案

基本上，我有以下指令：

angular.module('diDirectives', []).  
directive('ExampleElement', ['$rootScope', '$timeout', function($rootScope, $timeout) {

    return {
        priority: 0,
        restrict: 'C',
        template: '<div class="ExampleElement"></div>',
        link: function(scope, el, attrs) {

            function finish(){
                $('.ExampleElement').fadeOut(function(){
                    $(this).remove();
                });
            }

            //$('<div class="ExampleElement"></div>')
            //.appendTo('body')
            //.hide()
            //.fadeIn(function(){
                $timeout(finish, 10000);
            //});

        }
    }

}]);

angular.module（'diDirectives'，[]）。
指令（'ExampleElement'、['$rootScope'、'$timeout'，函数（$rootScope，$timeout）{
返回{
优先级：0，
限制：“C”，
模板：“”，
链接：功能（范围、el、属性）{
函数finish（）{
$（'.ExampleElement'）.fadeOut（函数（）{
$（this.remove（）；
});
}
//$('')
//.appendTo（'正文'）
//.hide（）
//.fadeIn（函数（）{
$timeout（完成，10000）；
//});
}
}
}]);

它查找一个名为ExampleElement的元素，然后淡出该元素，并在10秒后将其从DOM中删除。问题是该元素必须已经存在于页面上。。。我要做的是使它能够让指令为我将元素添加到页面中（请参阅注释掉的jquery代码，将其附加到主体中）

但我似乎不明白。我已经阅读了$compile和其他内容，但几乎所有的示例都涉及将指令添加到另一个指令或其他模板，而不仅仅是在代码运行时添加它

有谁能举例说明如何做到这一点吗

更新：我的一个想法是：

diApp.run(function ($state, $rootScope, $log, $location) {

    $rootScope.$state = $state;

    $('body').append('<div class="loading-overlay"></div>')
    .hide()
    .fadeIn(function(){

        // CALL DIRECTIVE LINK FUNCTION???

    });

});

diApp.run（函数（$state、$rootScope、$log、$location）{
$rootScope.$state=$state；
$（'body'）。附加（“”）
.hide（）
.fadeIn（函数（）{
//调用指令链接功能？？？
});
});

一个想法可能是在指令中使用restrict E，或者将元素附加到此指令中，或者用渐弱元素替换此元素。例：

<myExampleTag></myExampleTag>

因此，当angular引导到您的页面时，它将触发您的指令，替换此标记/附加到此标记并触发动画

您可以使用

angular.element

创建一个元素，例如，您的指令，然后用

angular.element（'body'）.append（yourElement）将其附加到指令中
如果我正确理解了这个问题，当应用程序启动时，您希望向页面添加淡入的元素（假设应用程序正在加载），然后在10秒钟后，您希望该元素淡出并从DOM中删除
您正在寻找正确的“角度方式”来完成此操作。通常，您只想在指令中修改DOM
虽然可以在run（）函数中使用$compile将节点注入DOM，但这有点过分了
我将创建一个指令“splash”，您可以将其应用于HTML中的body元素：
<body class="splash"></body>

angular.directive('splash', function($timeout) {
    return {
        restrict: "C",
        link: function(scope, element, attr) {
            //element is the element splash is applied to, in this case, "body"
            element.append('<div class="loading-overlay"></div>')
            .hide()
            .fadeIn(function(){
                 var self = $(this);
                 $timeout(function() {
                     self.fadeOut(function(){
                         $(this).remove();
                     });
                 }, 10000);
            });
        }
    }
})

如果您希望splash元素本身能够运行angular代码，那么这个简单的修改就可以做到：
angular.directive('splash', function($compile, $timeout) {
    return {
        restrict: "C",
        link: function(scope, element, attr) {
            //element is the element splash is applied to, in this case, "body"
            element.append($compile('<div class="loading-overlay"></div>')(scope))
            .hide()
            .fadeIn(function(){
                 var self = $(this);
                 $timeout(function() {
                     self.fadeOut(function(){
                         $(this).remove();
                     });
                 }, 10000);
            });
        }
    }
})

angular.directive（'splash'，函数（$compile，$timeout）{
返回{
限制：“C”，
链接：功能（范围、元素、属性）{
//元素是飞溅应用到的元素，在本例中为“主体”
元素。追加（$compile（“”）（scope））
.hide（）
.fadeIn（函数（）{
var self=$（这是）；
$timeout（函数（）{
自衰减（函数（）{
$（this.remove（）；
});
}, 10000);
});
}
}
})

如前所述，splash指令可以应用于任何元素（不仅仅是body）。您还可以变得复杂，传入一个模板来使用，而不是在指令中对模板进行硬编码
angular.directive('splash', function($compile, $timeout) {
    return {
        restrict: "C",
        link: function(scope, element, attr) {
            //element is the element splash is applied to, in this case, "body"
            element.append($compile('<div ng-include="\'' + scope.$eval(attr.splashSrc) + '\'"></div>')(scope))
            .hide()
            .fadeIn(function(){
                 var self = $(this);
                 $timeout(function() {
                     self.fadeOut(function(){
                         $(this).remove();
                     });
                 }, 10000);
            });
        }
    }
})

angular.directive（'splash'，函数（$compile，$timeout）{
返回{
限制：“C”，
链接：功能（范围、元素、属性）{
//元素是飞溅应用到的元素，在本例中为“主体”
元素。追加（$compile（“”）（scope））
.hide（）
.fadeIn（函数（）{
var self=$（这是）；
$timeout（函数（）{
自衰减（函数（）{
$（this.remove（）；
});
}, 10000);
});
}
}
})

用法：
<body class="splash" splash-src="'splash-template.html'"></body>


这与DOM中已有元素没有什么不同。我不希望DOM中已有任何元素可以替换或附加到。@Cameron可能会解释为什么不使用注释限制。这是一个简单的解决方案。您的意思是，如果该指令不存在，它应该将自己添加到DOM中？问题是，除非DOM中存在该指令，否则链接函数不会运行。如果你想让指令在它不存在的情况下将自己添加到主体中，它仍然是可解的，是这样吗？是的，就是这样！这些元素中有一个足够了吗？还是需要多个？应该只有一个。指令基本上运行时添加元素，然后在超时后将其删除，就这样。指令的模板再次包含该指令，这意味着将有一个无限循环。我将发布一个我希望您正在寻找的示例。“在指令中传递一个要使用的模板，而不是硬编码模板。”您可以展示一个示例吗？谢谢。在指令中使用templateUrl或模板怎么样？因此，我不必在DOM中有任何内容。根据“replace”的值，指令在默认情况下可以执行以下两种操作之一。如果replace=false（默认值），则指令将用模板替换元素的内容。如果replace=true，则指令将替换元素本身。在这两种情况下，您的指令基本上会清空正文的内容，我认为这不是您想要的。没有“replace:”append（尽管我认为这是一个很酷的添加）。
<body class="splash" splash-src="'splash-template.html'"></body>