如何通过使用范围动态更改AngularJS自定义指令模板

Question

这是我的第一个问题，所以我希望我可以解释情况此处的AngularJS文档谈论了将指示模板作为一个动态返回的函数。这里还有一个Plunkler现场演示。

.directive('....', function() {
   return {
     templateUrl: function(elem, attr){
       return **.... scope.Somthing ...**;
     }
   };
 });

该函数不使用范围参数，这是主要问题

到目前为止，我发现的唯一方法是动态设置模板图，与指令范围相关是这样

.directive('....', function() {
  return {
    link: function (scope, element, attrs) {
      scope.getTemplateUrl = function () {
        return **.... scope.Somthing ...**;
      };
    },
    template: '<ng-include src="getTemplateUrl()"/>'
  };
});

另一个解决方案是

.directive('....', function() {
  return {
    controller: function ($scope) {
      $scope.getTemplateUrl = function () {
        return **.... scope.Somthing ...**;
      };
    },
    template: '<ng-include src="getTemplateUrl()"/>'
  };
});

我的第一个问题是，这看起来像是问题的补丁

我的第二个问题是必须在指令中构建HTML字符串。

还有其他方法可以实现吗？

Answer 1

让我们解决两个问题的问题：d

第一个问题是关于将模板存储在JS中。

可以使用$ templatecache和注入

来解决此问题

<script id="myTemplate.html" type="text/ng-template"> <div> SOME MARKUP <div> </script>

在这里您可以阅读有关此

的更多信息

第二个问题是关于动态模板的。因此，有2个解决方案（据我所知：D）您已经提到的第一个解决方案 - 使用ng -Include。

第二个解决方案是将$编译用于与角指令的动态编译HTML。

第一个解决方案要好一些，因为在第二种情况下，您必须始终记住内存泄漏。在这里查找更多信息，并在这里