Question

我试图通过jQuery .attr()向特定事件的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元素添加指令？

Answer 1

试试这个。您需要使用$this->display($dbCon);

动态重新编译它

$compile

但使用$("#myDiv").attr("my-directive", ""); $("#myDiv").html($compile($("#myDiv").html())($scope)); ̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶获取元素并不是一个好方法。 $非常珍贵。因此，将元素存储在一个变量中以便不会每次都获取。

Answer 2

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

$("#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̶̶n̶e̶e̶d̶̶t̶o̶̶r̶u̶n̶̶̶$̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶。

将指令分配给HTML元素

2 个答案: