CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-compile
gr3g
gr3g

Reputation: 2914

$compile not compiling ng-href in directive

When I pass a template in an attribute, and compile it to render it afther, $compile is working fine except for ng-href="expression", where the expression isn't compiled.

Is this done in the compile function and too late in the link function?

By the way, I link the template scope to it's parent. How can I find the closest scope that is a controllers scope.

$parent might not be in all cases the controllers scope.

angular.module('app', [])

.controller('AppController', function(){
  
  var self = this;
  
  self.one = "one";
  self.two = "two";
  
})

.directive('testCompiler', ['$compile', function($compile){
  return {
    restrict : 'E',
    scope : {
      template : '@'
    },
    link : function(scope, element){
      
      var template = angular.element(scope.template);
      var linkFn = $compile(template);
      var child = linkFn(scope.$parent);
      $(element).append(child);
    
    }
  
  
  };

}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="AppController as AppCtrl">

 <test-compiler template="<div> Hello <span ng-bind='AppCtrl.one'> </span> <a ng-href='AppCtrl.two' ng-bind='AppCtrl.two'> </a> </div>"> </test-compiler>

</div>

Upvotes: 1

Views: 448

Answers (2)

sdgluck
sdgluck

Reputation: 27327

If you read the documentation for the ng-href directive you will see that it expects a template expression (e.g. {{propertyOnTheScope}}):

<test-compiler template="<div>Hello <span ng-bind='AppCtrl.one'></span> <a ng-href='{{AppCtrl.two}}' ng-bind='AppCtrl.two'></a></div>">

As a side note, this is quite an odd way to pass a template and makes the markup very unclear. I recommend that you look into using a transclude.

Upvotes: 1

Fenex
Fenex

Reputation: 239

You need code like: 

ng-href='{{AppCtrl.two}}'

Upvotes: 1

Related Questions