指令动态templateUrl

时间:2017-10-05 13:03:28

标签: angularjs angularjs-directive

使用我在主页中使用的角度显示许多popin

template1.html 将显示为popin

如果我修复了.html,就会工作。

  <a class="vsn_alert-item-link" tooltip-special="template1.html" tooltip-placement="right">
<。>在.js方面有我的指令

 .directive('tooltipSpecial', ['$uibTooltip', '$rootScope', '$timeout', 
      function($uibTooltip, $rootScope, $timeout) {
         return $uibTooltip('tooltipSpecial', 'tooltip', 'click');
 }]);'

指令是:

.directive( 'tooltipSpecialPopup', ['$timeout', function ($timeout) {
  var templateUrl="";
  return {
    restrict: 'AE',
    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },

    controller: function($rootScope, $scope){
     $scope.$apply();
    } ,
      templateUrl: function(elem,attrs) {
           return attrs.content
       }
  };

}])

结果是这个错误:

angular.js:13550 Error: [$compile:tpload] Failed to load template: {{content}} (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.5/$compile/tpload?p0=%7B%7Bcontent%7D%7D&p1=404&p2=Not%20Found
    at angular.js:68
    at handleError (angular.js:18978)
    at processQueue (angular.js:15961)
    at angular.js:15977
    at Scope.$eval (angular.js:17229)
    at Scope.$digest (angular.js:17045)
    at Scope.$apply (angular.js:17337)
    at done (angular.js:11572)
    at completeRequest (angular.js:11778)
    at XMLHttpRequest.requestLoaded (angular.js:11711)

1 个答案:

答案 0 :(得分:0)

app.directive('hymn', function() {
   return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           // some ode
       },
       templateUrl: function(elem,attrs) {
           return attrs.templateUrl || 'some/path/default.html'
       }
   }
});

所以你可以通过标记提供templateUrl

<hymn template-url="contentUrl"><hymn>

现在您只需注意属性contentUrl使用动态生成的路径填充。