CODEWITHSUNDEEP
javascriptangularjs
Whirlwind991
Whirlwind991

Reputation: 495

Angular not compiling correcty

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...

Upvotes: 0

Views: 531

Answers (2)

coderdark
coderdark

Reputation: 1501

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>

Upvotes: 0

Deep
Deep

Reputation: 9794

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

Upvotes: 1

Related Questions