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指令 - 添加類來創建「格」元素

回答

相關問題