AngularJS：使用指令添加內聯自定義代碼

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

要查看它的實際效果，您可以在此處檢查plunkr： https ://plnkr.co/edit/xjjMRPY3aE8IVLIeRZMp ? p = preview

現在我的問題是，當我嘗試使用自定義指令添加AngularJS指令（例如ng-show，ng-if）時，AngularJS似乎無法識別它們以及我正在傳遞的模型范圍。

另一個問題是，當我嘗試添加普通的Javascript事件函數（例如onclick =“”，onchange =“”）時，它確實可以工作，但有時AngularJS不會讀取它們，尤其是當元素具有ng-change，ng-click屬性時。

再次，我在應用程序上執行此方法，因為我具有通用字段，並且我想通過添加所謂的“自定義代碼”來控制其中一些字段。

任何幫助將不勝感激！

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

作為一項服務，您需要將其注入到當前控制器（或前/后鏈接功能）中才能使用它。