Javascript AngularJS：使用指令添加内联自定义代码

下面是一个场景

在应用程序中，您可以在元素（例如输入文本、div）中添加内联自定义代码（HTML属性，例如style=，onclick=“alert（'Test'））。自定义代码绑定到主模型，并使用我创建的自定义指令加载到元素。我这样做是为了控制动态生成的字段，我想根据不同的输入隐藏和显示这些字段

这是在元素上加载内联属性的自定义指令：

app.directive('addCustomHtml', function() {
      return {
          scope: {
              customHtml: "="
          },
          link: function(scope, element, attributes){
              scope.$watch('customHtml', function(newVal, oldVal) {
                  if (newVal) {
                      var attrs = newVal.split('\n');
                      for (var i = 0; i < attrs.length; i++) {
                          var result = attrs[i].split('=');

                          var attr = result.splice(0,1);
                          attr.push(result.join('='));

                          if (attr[1]) {
                              element.attr(attr[0], attr[1].replace(/^"(.*)"$/, '$1'));
                          }
                      }
                  } else {
                      if (oldVal) {
                          var attrs = oldVal.split('\n');
                          for (var i = 0; i < attrs.length; i++) {
                              var attr = attrs[i].split('=');
                              if (attr[0]) {
                                  element.removeAttr(attr[0]);
                              }
                          }
                      }
                  }
              })
          }
      }
    });

app.directive（'addCustomHtml'，function（）{
返回{
范围：{
自定义HTML:“”
},
链接：功能（范围、元素、属性）{
作用域：$watch（'customHtml'，函数（newVal，oldVal）{
if（newVal）{
var attrs=newVal.split（'\n'）；
对于（变量i=0；i

它绑定到元素，如下所示：

<input type="checkbox" add-custom-html custom-html="checkbox1.customHtml">Yes

是

要查看它的运行情况，您可以在此处查看plunkr：

现在我的问题是，当我尝试使用我的自定义指令添加AngularJS指令（例如，ng show，ng if）时，AngularJS似乎无法识别它们和我传递的模型范围

另一个问题是，当我尝试添加普通Javascript事件函数（例如onclick=“”，onchange=“”）时，它确实可以工作，但有时AngularJS无法读取它们，尤其是当元素具有ng change，ng click属性时

同样，我在应用程序上使用这种方法是因为我有通用字段，我想通过添加所谓的“自定义代码”来控制其中的一些字段

---

任何帮助都将不胜感激

如果要添加HTML代码并在当前

$scope

范围内编译，应使用以下服务：

---

作为一项服务，您需要将其注入当前控制器（或前/后链接功能）才能使用它。

您使用AngularJS有什么具体原因吗？@Baruch yup，项目从一开始就使用AngularJS。这只是添加的另一个功能：）

let someVar = $compile(yourHTML)($scope);
// you can now append someVar to any element and 
// angular specific markup will work as expected