Question

这是场景。

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

要查看其运行情况，可以在此处检查“ punkr”：https://plnkr.co/edit/xjjMRPY3aE8IVLIeRZMp?p=preview

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

另一个问题是，当我尝试添加普通的Javascript事件函数（例如onclick =“”，onchange =“”）时，它确实起作用，但有时AngularJS不会读取它们，尤其是当元素具有ng-change时，单击属性。

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

任何帮助将不胜感激！

Answer 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

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

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

1 个答案: