AngularJS指令 - 添加类来创建“格”元素

我想为我的AngularJS项目AngularJS指令 - 添加类来创建“格”元素

这里创建一个自定义指令是我到目前为止有：

.directive('testDirective', [ 

    function() { 

     return { 
      restrict: "EA", 
      replace: false, 
      transclude: false, 

      link: function ($scope, el, attrs) { 
       var param = {}; 

       param.className = attrs.customClass || 'default-class'; 
       param.distinctClassName = attrs.distinctClass || 'added-class'; 

       el.addClass(param.distinctClassName); // this works? :| 

       var createdDiv = null; 

       createdDiv = createdDiv || document.createElement('div'); 
       createdDiv.className = param.className; // this works... 
       createdDiv.addClass(param.distinctClassName); // this doesn't work? :/ 
      } 
     }; 
    } 
]);

对于现在，这是一个非常简单的指令，但它会变得更大。我创建一个元素动态，因为我想用它作为模态框，我将附加一个div到正文。

我想添加一个不同的类，同时保持原始类具有所有的默认样式。

这里发生的事情：

模板

获取参数工作使用<test-directive custom-class="first" distinct-class="second" /> - 好
添加类的指令元素（测试指令）是工作- 好的
创建div工作- 好
新创建的div更改的className工作- 好
添加类到新创建的div不起作用...... - 不好

现在，谁能告诉我为什么我不能添加类，但可以直接更改它？我知道我必须忘记一些东西......但无法弄清楚什么！

来源

2015-01-15 eHx

createdDiv.addClass(param.distinctClassName);不起作用，因为它是一个DOM元素，它不是一个jqlite包裹的角元素。并且addClass是在jq包装器上添加的功能，并且不适用于DOM元素。因为该元素是一个角度元素（jq[lite]包裹DOM元素）

angular.element(createdDiv).addClass(param.distinctClassName);

和el.addClass(param.distinctClassName)作品：

你需要做的。

将此问题分开后，您可以轻松地为您的指令创建模板，并使用绑定到范围属性的ng-class，并且您可以远离手动完成所有这些操作。

来源

2015-01-15 19:14:14 PSL

AngularJS指令 - 添加类来创建“格”元素

回答

相关问题