将指令分配给HTML元素后编译

我试图通过jQuery .attr()向特定事件上的HTML元素添加指令。该指令在添加之后不起作用。将指令分配给HTML元素后编译

angular.module("myApp", []) 
    .directive("myDirective", function() { 
     restrict: "A", 
     link: function() { 
      alert("Hello"); 
     } 
    });

当我用它直接在HTML，它工作正常：

<div id="myDiv" my-directive></div>

但是当我尝试了一段用jQuery后，将其添加：

$("#myDiv").attr("my-directive", "")

它不会做任何事情。

如何在这种情况下向HTML元素添加指令？

来源

2017-05-29 Jameel

当您在执行所有编译时动态添加它时，您需要重新编译它以便应用指令。

$("#myDiv").attr("my-directive", ""); 
var elem = $("#myDiv"); 
$compile(elem)($scope); 
$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

在控制器中注入$ compile。编译完成于jQuery元素（这是非角度上下文），̶y̶o̶u̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶。

来源

2017-05-29 09:13:41 SaiUnique

是的，我忘了提及它 –

它适用于你的解决方案，没有$ scope。$ apply（）;'。当我使用'$ scope。$ apply（）;'时，它会抛出一个错误： '错误：[$ rootScope：inprog] $摘要已经在Scope中进行$ apply' – Jameel

@georgeawg，请你解释为什么$ scope。$ apply（）不是必需的，因为jquery代码是非角度的上下文。 – SaiUnique

试试这个。你需要重新编译它使用动态$compile

$("#myDiv").attr("my-directive", ""); 
$("#myDiv").html($compile($("#myDiv").html())($scope)); 
̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

但使用$不是一个很好的解决方案获得的元素。 $是非常宝贵的。因此，将元素存储在一个变量中以避免每次都获取。

var element = $("#myDiv"); 
element.attr("my-directive", ""); 
element.html($compile(element.html())($scope)); 
̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶

来源

2017-05-29 09:12:02

将指令分配给HTML元素后编译

回答

相关问题