使用純JS設置ng屬性

我得到了HTML與幾個div和類。我想要迭代這些類並將該工具提示分配給該類中的div。我不想將這些角度屬性放入HTML中，因爲我需要動態生成它以逃避HTML中的許多代碼。

例如使用

button.setAttribute ("tooltip-placement", "bottom");

角忽略和放置是標準之一：頂部。

如何「說服」角度使用我自己的角度屬性處理？

謝謝！

以下操縱DOM的指令不會帶來令人討厭的解決方案：雖然它在DOM中顯示（檢查它），但角度忽略它。它應該彈出一個工具提示。

demoApp.directive（ 'tooltipView'，函數（）{ 回報{ 限制： 'EA'，

link: function (scope, element, attrs) { 
     element.attr("tooltip-placement", scope.placement); 
     element.attr("tooltip-html-unsafe", "testtooltip"); 
     element.attr("tooltip-trigger", "mouseover"); 
    } 
};

}）

來源

2014-02-20 Pille

爲什麼你不能在編輯器中添加這些屬性？ Angular屬性的唯一要點是最大限度地減少視圖中的代碼量，並使視圖易於查看並確定發生的事情。 – tymeJV

我想在javascript文件中添加不屬於HTML文件的屬性，因爲我想動態確定屬性。 – Pille

處理屬性的變化的元件正確的方法是由鏈接函數內編譯它是如下（實施例）：

app.directive("tooltipView", function($compile) { 

return { 
    restrict: "AE", 
    link: function(scope, element, attrs) {     
     var tooltipContent = scope.tooltipHTML;  
     if (!element.attr('tooltip-html-unsafe')) { 
      element.attr("tooltip-html-unsafe", tooltipContent); 
      $compile(element[0])(scope); 
     } 
    });  
    }  
    }; 
});

來源

2014-02-27 16:14:51 Pille

我想這一切都取決於當獲取生成工具提示上。如果在執行button.setAttribute(..)代碼之前正在運行工具提示代碼，則無法獲得預期的行爲。

我的第一個建議是使用angular-bootstra's tooltip wrapper，並利用數據綁定角度提供來設置位置。

例如：

<... tooltip-placement="{{ scopePropertyIndicatingTooltipPlacement }}" ../>

隨着控制器：

function MyCtrl($scope) { 
    $scope.scopePropertyIndicatingTooltipPlacement = "right"; 
}

來源

2014-02-20 14:27:48 jlb

謝謝你的回答！什麼是「scopePropertyIndicatingTooltipPlacement」？數據綁定或控制器的屬性？我不能在視圖/ HTML中放置任何代碼來顯示工具提示。我該如何生成一個指令來爲我做這件事？ – Pille

@Pille是的，'scopePropertyIndicatingTooltipPlacement'確實是控制器的一個屬性。 – jlb

代碼「<... tooltip-placement = ... /> 是一個HTML？我的問題是我必須通過純JavaScript生成屬性並說服Angular to處理它。 – Pille

使用純JS設置ng屬性

回答

相關問題