Question

我正在使用链接函数操作DOM，以使用指令属性添加自定义css。

所以在这里，首先我将附加一个带有类名的div，然后找到div并在里面添加另一个div。

(function(){
   "use strict";

   var directive = function() {
      return {
         restrict: 'E',
         link: function (scope, element, attrs) {
            // Configuration
            var id = Math.floor(Math.random()*100);
            attrs.id = attrs.id || 'my-directive-'+id;
            element.attr('id', attrs.id);

            element.append('<h1>Here</h1>');

            element.append('<div class="my-directive-background">');
            element.find('.my-directive-background').css({'background-color':attrs.bColor});
            // add css 

            element.find('.my-directive-background').append('<div class="my-directive-foreground">');
            // add css
            element.find('.my-directive-foreground').css({'background-color':attrs.fColor});
         }
      };
   }

   var directives = angular.module("directives");
   directives.directive("myDirective",[directive]);

})();



<my-directive bColor="gray" fColor="red"  />
<my-directive bColor="gray" fColor="green" />

问题是，当我使用多个相同的指令时，find方法也会检测前一个元素。

如何只找到属于当前指令元素的div？

更新:(简单解决方案）

@Shripal的解决方案运行正常。但问题是因为元素关闭语法。当我改变时，它只是修复了

<my-directive bColor="gray" fColor="red" />

到

<my-directive bColor="gray" fColor="red"></my-directive>

Answer 1

如果jQuery未添加到您的项目中，则使用类选择器查找将无效。

我使用element.children()

创建了一个仅使用角度的plunker

编辑：

使用jquery更新了plunker。我已经优化了代码，首先准备DOM，然后将其添加到元素中。

访问链接功能中的当前自定义指令元素

1 个答案: