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

Question

Here's the scenario.

In the app, you can add inline custom code (HTML attributes ex. style="", onclick="alert('Test')") in an element (ex. input texts, divs). The custom code is binded to the main model and loaded to the element using a custom directive I've created. I'm doing this to control dynamically generated fields that I want to hide and show based on different inputs.

This is my custom directive that loads inline attributes on the element:

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]);
                              }
                          }
                      }
                  }
              })
          }
      }
    });

It is binded to the element like this:

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

To see it in action, you can check the plunkr here: https://plnkr.co/edit/xjjMRPY3aE8IVLIeRZMp?p=preview

Now my problem is, when I try to add AngularJS directives (ex. ng-show, ng-if) using my custom directive, AngularJS doesn't seem to recognize them and the model scope I'm passing inside.

Another problem is when I try to add vanilla Javascript event functions (ex. onclick="", onchange=""), it does work but sometimes AngularJS does not read them especially when the element has an ng-change, ng-click attributes.

Again, I am doing this approach on the app because I have generic fields and I want to control some of them by adding this so called "custom codes".

Any help would be highly appreciated!!

Answer 1

If you want to add HTML code and compile it within current $scope , you should use the $compile service:

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

Being a service, you'll need to inject it into current controller (or pre/post link function) to be able to use it.