吳-Transclude不工作的NG-包括

我已經創建，當我使用的是不工作一NG-transclude樣品NG-包括內部指令模板property.Below是我曾嘗試吳-Transclude不工作的NG-包括

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。

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

來源

2016-08-23 JEMI

如果我的回答解決你的問題，你可以隨時將其標記爲已接受 –

當使用templateUrl屬性時，您還可以傳遞一個函數來動態加載模板。

沒有必要將函數放在控制器中，特別是因爲它並不真正屬於那裏：控制器應該包含視圖邏輯，而不是加載視圖本身的函數。

我加在templateUrl的功能，而不是你的plunkr：

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

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

正如你可以看到這個給你所期望的行爲

來源

2016-08-23 20:26:58

吳-Transclude不工作的NG-包括

回答

相關問題