AngularJs while replacing the table row - changing html from compile function but scope is not getting linked

Question

Here, I am trying to replace the table row through directive and compile function. Somehow, the scope is not linking to newly added template. Here is the really simple code. Created a plnkr here: http://plnkr.co/edit/toAxkoLkWSIxYJU06iuW?p=preview

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
   <!-- <script src="app.js"></script>-->
  </head>

  <body>
    <h1> stand alone </h1>
   <!-- <row></row>
   --> 
    <h1>in table</h1>

    <table>
    <tr><td> Row 1</td></tr> 
     <tr  sda-data-embed='true' row><td>my row goes here</td></tr>  
    <tr><td> Row 4</td></tr> 
  </table> 

  <script>
    var app = angular.module('plunker', []);

app.directive('row', function($compile) {

  var template = '<tr><td>Row 2: This is good</td></tr><tr><td>Row 3: {{name.firstName}}</td></tr>';

  return {
    restrict: 'EA',
    replace: true,
    scope:{},
    /*template: function(element, attrs) {
      var templ = template;
      if (!attrs.sdaDataEmbed) {
        templ = '<table>' + template + '</table>';
      }
      return templ;
    },*/
    compile: function(element, attrs) {
      //$scope.firstName = 'Y';
      var templ = template;
      if (!attrs.sdaDataEmbed) {
        templ = '<table>' + template + '</table>';
      }
      element[0].outerHTML = templ;
    },
    controller: ['$scope', DataController]
  }

  function DataController($scope) {
    $scope.name = {};
    $scope.name.firstName = 'Gosh';
  }
});

  </script>

  </body>

</html>

UPDATE : Later I found how to replace the table row, not sure if it is recommended but it works! I replaced, compiled the html element from link function. here is the code.

    <!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
  <!-- <script src="app.js"></script>-->
</head>

<body>
  <h1> stand alone </h1>
  <div>
    <my-row></my-row>
  </div>

  <h1>in table</h1>

  <table>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr sda-data-embed='true' my-row>
      <td>my row goes here</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
  </table>

  <script>
    var app = angular.module('plunker', []);

    app.directive('myRow', function($compile) {

      var template = '<tr><td>Row 2: This is good</td></tr><tr><td>Row 3: {{name.firstName}}</td></tr>';

      return {
        restrict: 'EA',
        replace: true,
        scope: {},
        link: function(scope, element, attrs) {
          var templ = template;
          if (!attrs.sdaDataEmbed) {
            templ = '<table>' + template + '</table>';
          }
          var e = $compile(templ)(scope);
          element.replaceWith(e);
        },
        controller: ['$scope', DataController]
      }

      function DataController($scope) {
        $scope.name = {};
        $scope.name.firstName = 'Gosh';
      }
    });
  </script>

</body>

</html>

Dayan Moreno Leon · Accepted Answer · 2015-03-31 19:40:51Z

1

in your compile function instead of doing the HTML manipulation return an object with the pre and post properties

compile: function compile(tElement, tAttrs, transclude) {
  return {
    pre: function preLink(scope, iElement, iAttrs, controller) { ... },
    post: function postLink(scope, iElement, iAttrs, controller) { ... }
  }
  // or
  // return function postLink( ... ) { ... }
}

then perform the html manipulation on the pre: function this will allow you to manipulate the dom pre-link

https://docs.angularjs.org/api/ng/service/$compile

answered Mar 31, 2015 at 19:40

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yogesh Manware Over a year ago

Thanks for your answer, technically correct but did not solve problem.

Collectives™ on Stack Overflow

AngularJs while replacing the table row - changing html from compile function but scope is not getting linked

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related