$ compile没有在指令中编译ng-href

时间:2015-10-01 10:25:49

标签: angularjs angularjs-directive angularjs-compile

当我在一个属性中传递一个模板,然后编译它来渲染它时,$ compile工作正常,除了ng-href="expression",其中表达式没有被编译。

这是在编译函数中完成的,在链接函数中是否太晚了?

顺便说一句,我将模板范围链接到它的父级。如何找到最接近作为控制器范围的范围。

$parent可能并非在所有情况下都是控制器范围。



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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您需要以下代码:

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

答案 1 :(得分:1)

如果您阅读documentation for the ng-href指令,您会看到它需要模板表达式(例如{{propertyOnTheScope}}):

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

作为旁注,传递模板并使标记非常不清楚是一种奇怪的方式。我建议您考虑使用transclude