CODEWITHSUNDEEP
javascriptangularjsdynamicangularjs-directivecompilation
Gary
Gary

Reputation: 2339

Unable to compile a dynamically added Directive into a page

I am trying to add a dynamically added element directive into a page but it is not working and getting compiled in the page it is added. Here is the plunker code. What is wrong with the code?

http://plnkr.co/edit/BFPxAvEahT1I930mvB5r

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
        var app = angular.module('myApp', []);
      app.controller("fCtrl",function($scope,$compile){
        $scope.xx = ['x','c','y','z','a'];
        $scope.add = function(){
          var templ = document.getElementById('test').innerHTML;
          templ = templ+'<datan-type content="test1" con="{{xx}}"></datan-type>';
          document.getElementById('test').innerHTML = templ;
          //$compile(document.getElementById('test').innerHTML)($scope);
          alert(document.getElementById('test').innerHTML);
        }
      });

      app.directive('datanType', function ($compile) {
  return { 
    restrict: 'E',
    replace: true,
    link: function (scope, ele, attrs) {
        var testTemplate1 = '<h1 ng-repeat="x in arr">Test{{x}}</h1>';
        var testTemplate2 = '<h1>Test2</h1>';
        var testTemplate3 = '<h1>Test3</h1>';
        var template = '';   
        scope.arr  = eval(attrs.con);
        switch(attrs.content){
            case 'test1':
                template = testTemplate1;
                break;
            case 'test2':
                template = testTemplate2;
                break;
            case 'test3':
                template = testTemplate3;
                break;
        }

        ele.html(template);
        $compile(ele.contents())(scope);  

    }
  };
});



</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="fCtrl">
  <p>Result:</p>
  <datan-type content="test1" con="{{xx}}"></datan-type>
  <div id="test"></div>
  <button ng-click="add()">Add Form Elem Eg - Error Area</button>
</body>
</html>

Upvotes: 2

Views: 122

Answers (1)

KreepN
KreepN

Reputation: 8598

Gary, this was killing me so I made it my morning goal to figure out the silly syntax:

Working Plnkr - Clicky

Change your controller code to :

var elementToAdd = angular.element('<datan-type content="test1" con="{{xx}}"></datan-type>');
$compile(elementToAdd)($scope);
document.getElementById('test').appendChild(elementToAdd[0]);

enter image description here

Upvotes: 3

Related Questions