javascript - 定义 Angular 模板的更简洁的方法

Question

考虑这段代码

my_app.run( [ '$templateCache' , function( $templateCache ) {
    var template = "" +
        "{{ item.name }}" +
        "<ul ng-if='item.sub'>" +
            "<li ng-repeat='item in item.sub' ng-include=\"'angular-multi-select-item.htm'\"></li>" +
        "</ul>" +
        "";
    $templateCache.put( 'angular-multi-select-item.htm' , template );
}]);

虽然这按预期工作，但我认为它非常丑陋(内部带有 html 的连接字符串)。是否有其他更简洁的方法来定义 Angular 模板的 html？

Answer 1

您对此有何看法？只需在您的工作目录中创建一个 View html View 文件并使用 $http 加载它。

$templateCache.put('angular-multi-select-item.htm', $http.get('views/template.html'));

你也可以试试 `ng-include? ( documentation ) 并在主视图中添加包含，如:

<div ng-include="'views/template.html'"></div>