Angularjs 附加文本而不是警报ID

在过去的几天里，我一直在阅读$compile，现在我想做什么，而不是显示如何附加一些基本文本的警告

指令（'part'，['$compile'，函数（$compile）{ 返回{ 限制：“AE”， 范围：正确， 模板：“每个州的信息” 链接：函数（范围、元素、属性）{ scope.elementId=element.attr（“id”）； scope.partClick=函数（）{ 警报（scope.elementId）； 元素。追加（“此处的一些文本”）； $compile（元素）（范围）； }; attr（“ng click”，“regionClick（）”）； 要素。移除要素（“部分”）； $compile（元素）（范围）； } } ]);

---

在您的示例中，您正在编译指令元素。这样可能会出现意外行为，尤其是您正在删除定义属性attr'part'。我不知道这会带来什么，但看起来有点可怕。 我使用compile创建新元素，将其与Angular连接，并将其附加到包含元素，如下所示：

var popTpl = '<pop-it class="active CLASS_NAME no-ng-class="edtme|checkActive"></pop-it>'
            .replace('CLASS_NAME', cls);
popEl = $compile(angular.element(popTpl))($scope);
element.append(popEl);

---

var-popTpl=”不管它有什么价值，这里是一个不使用
$compile
的指令：


角度模块（“应用程序”，[]）
.directive（'part'，['$compile'，函数（$compile）{
返回{
限制：“AE”，
范围：正确，
模板：'每个状态的信息'，
链接：函数（范围、元素、属性）{
//scope.elementId=element.attr（“id”）；
scope.elementId=attrs.id；
scope.partClick=函数（）{
警报（scope.elementId）；
元素。追加（“此处的一些文本”）；
//$compile（元素）（范围）；
};
//attr（“ng click”，“regionClick（）”）；
元素上（“单击”），函数（事件）{
scope.partClick（）；
作用域：$apply（）；
});
//要素。移除要素（“部分”）；
//$compile（元素）（范围）；
}
};
}])

.part{
光标：指针；
}
.部分：悬停{
边框：2倍绿色；
背景颜色：黄色；
}

指示示例

该代码可能不起作用，因为单击处理程序调用

regionClick

，并且没有具有该名称的函数。使用指令，添加带有

element.on的单击处理程序（'click'，

而不是compile

ng click

。OP正在删除

part

属性，以阻止$compile执行无限递归。是的，这是有道理的，但首先你不应该处于这种情况。无限循环是你的第一个提示。第二个是设计的简单性。注意，你做了很多工作诸如element.append（）、element.attr（）等操作等等。如果你使用Angular方法，你会发现用更少的代码做这件事更容易、更透明。我从jQuery切换到Angular花了大约3个月的时间，这很痛苦，我就是无法改掉我的旧习惯。但最后我很高兴我做到了。这样想可能会有帮助。如果你用模板无需编译，Angular会自动编译。使用compile将DOM元素插入现有模板（元素作为其根）.$compile非常适合动态插入/销毁DOM元素。您可以将其放入循环中，并使用它来代替ng repeat；有时这种方法是有意义的。我同意该指令可以在没有$compile的情况下工作。向OP演示如何做到这一点。“不要这样做，因为它看起来很可怕”不是一个很好的答案。