Question

我创建了一个ng-transclude示例，当我使用ng-include inside指令模板属性时，该示例无效。这是我试过的代码

angular.module("app",[]);
angular.module("app").controller('appController', function ($scope) {

   $scope.message="Message from controller";

});
angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        template : '<div ng-include=\"getTemplateUrl()\"></div>',
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
           $scope.getTemplateUrl=function(){
             //dynamic url
              return "frame.html";
            }
          $scope.message="message from directive";
        },
        transclude:true,


    }

});
angular.module("app").directive('mychildFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"childframe.html",
        controller:function($scope){

        },


    }

});

childFrame.html

<h2>I am from Child</h2>
<div></div>

frame.html

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

的index.html

<my-frame>
  <mychild-frame></mychild-frame>
  </my-frame>

https://plnkr.co/edit/O58voI?p=preview

当我将属性模板更改为templateUrl =＆＃34; frame.html＆＃34;它工作正常。但问题是，模板中的这个HTML页面是动态的。所以我最终得到了ng-include。

您能否提供任何可能的解决方法？

Answer 1

使用templateUrl属性时，您还可以向其传递一个动态加载模板的函数。

没有必要将函数放在控制器中，特别是因为它实际上并不属于那里：控制器应该包含视图逻辑，而不是加载视图本身的函数。

我在你的plunkr中添加了templateUrl中的函数：

templateUrl : function() {
  return 'frame.html';
}

https://plnkr.co/edit/HQHI9hkTojkZFK2Gjxfw?p=preview

如您所见，这可以为您提供所需的行为

Ng-Transclude不适用于ng-include

1 个答案: