Angular not compiling correcty

Question

I'm trying to get my head around learning $compile but just looking for a couple of pointers as to where I'm going wrong...

var app = angular.module("App", []);

app.controller("Ctrl", function ($scope, $http, $compile) {

}).directive('myDir', function ($compile) {

$(document).on("click", "#button", function ($compile) {
 var newDirective = angular.element('<li>{{app data}}</li>');
    $(".grid ul").append(newDirective);
    $compile(newDirective)($scope);
   });
  });

I suppose firstly, nothing seems to work when I put it into my directory but it does when I put it in the controller. And secondly it doesn't seem to compile as the Angular tags/elements don't render correctly. I just can't figure out where I'm going wrong...

Deep · Accepted Answer · 2016-12-14 02:55:38Z

1

As per the Docs $compille

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

You are on the right track to use it , just need some modification in your directive code like this.

var app = angular.module("App", []);

app.controller("Ctrl", function ($scope, $http, $compile) {

}).directive('myDir', function ($compile) {
    return{
        restrict: 'A',
        scope: {
            data:"=appdata"
        },
        link: function(scope,element){
                    var newDirective = angular.element('<li>'+ scope.data +'</li>');
                    var content = $compile(newDirective)(scope);
                    element.append(content);
        }
    }
    
});

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

  <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.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <div class="grid" >
      Hello
      <ul my-dir  appdata="'whatever'">
        
      </ul>
    </div>
    
  </body>

</html>

Plunker : https://plnkr.co/edit/xqgnhXnVoYOsXFhPMbOY?p=preview

answered Dec 14, 2016 at 2:55

Deep

9,7962 gold badges24 silver badges34 bronze badges

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

4 Comments

Whirlwind991 Over a year ago

This is awesome thank you! I accidentally missed some code when I put the example in though, which I've edited. Originally I had a button click which added the list item to the UL.. (Sorry should have read my code properly before submitting). Would it be possible to update the plunk to show how this is incorporate too please? Other then that it works perfectly

Deep Over a year ago

sure, just update the question with the html, i will give a try

Deep Over a year ago

updated the plunker by assuming your html , hope it helps.

Whirlwind991 Over a year ago

Excelent. Haven't worked with $on or $rootScope before - looks like I've got some research to do! I appreciate you taking the time out and showing me how it works, thanks!

coderdark · Accepted Answer · 2016-12-14 04:05:01Z

Your directive is not formatted (created) correct. No need to use JQUERY... you are compiling the html and the data ($scope) but you are not applying the compiled template to your html.

Check this plunkr: https://plnkr.co/edit/eKdIEhyLBViWAOzfWhhV?p=preview

angular.module('plunker', [])
  .directive('compileDir', ['$rootScope', '$compile', compileDir])
  .controller('HomeController', [HomeController]);

  function compileDir($rootScope, $compile) {

      var self = {};

      self.restrict = 'A';
      self.scope = {
        compileDirOptions: '='
      };
      self.link = linkFn;

      return self;

      function linkFn($scope, $element, $attributes) {

        // I am making a new scope because I do not want to mess the    directive's one, you do not have to
        var newScope = angular.merge($rootScope.$new(),    $scope.compileDirOptions.data);
        var el = $compile($scope.compileDirOptions.html)(newScope);

        $element.append(el);

      }

   }

   function HomeController() {

       var self = this;

       self.message = "Hello World!";

       self.data = {
       html: '<li>{{name}}</li><li>{{color}}</li>',
       data: {
           name: 'app data',
           color: 'red'
       }
   }

}

Your html is like this:

<!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.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="HomeController as home">
  <ul compile-dir compile-dir-options="home.data"></ul>
</body>

</html>

thanks for taking the time to answer, unfortunately my up vote goes to the other answer but this is still a different way of doing it, so thats cool!

Collectives™ on Stack Overflow

Angular not compiling correcty

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related