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

【问题标题】：AngularJS: Add inline custom code using a directiveAngularJS：使用指令添加内联自定义代码
【发布时间】：2018-12-19 04:29:14
【问题描述】：

这是场景。

在应用程序中，您可以在元素（例如输入文本、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]);
                              }
                          }
                      }
                  }
              })
          }
      }
    });

它像这样绑定到元素：

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

要查看它的实际效果，您可以在此处查看 plunkr：https://plnkr.co/edit/xjjMRPY3aE8IVLIeRZMp?p=preview

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

另一个问题是当我尝试添加 vanilla Javascript 事件函数（例如 onclick=""、onchange=""）时，它确实可以工作，但有时 AngularJS 不会读取它们，尤其是当元素具有 ng-change、ng 时-单击属性。

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

任何帮助将不胜感激！

【问题讨论】：

您使用 AngularJS 是否有特定原因？
@Baruch 是的，该项目从一开始就使用 AngularJS。这只是添加的另一个功能:)

标签： javascript html angularjs angularjs-directive dom-manipulation

【解决方案1】：

如果你想添加 HTML 代码并在当前的$scope 中编译它，你应该使用$compile 服务：

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

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

【讨论】：