Ng-Transclude 不适用于 Ng-Include

Question

我创建了一个 ng-transclude 示例，当我在指令模板中使用 ng-include 时它不起作用 property.Below 是我试过的代码

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="frame.html" 时，它工作正常。但问题是，模板中的这个 HTML 页面是动态的。所以我最终得到了 ng-include。

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

Answer 1

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

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

我在 templateUrl 中添加了函数，而不是在您的 plunkr 中：

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

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

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

Ng-Transclude 不适用于 Ng-Include

Ng-Transclude not working for ng-include

angularjs

angularjs-ng-transclude