javascript - Angularjs:如何将图层添加到外部模板中？

Question

我可以在模板中添加元素吗？例如，这是我当前的代码，它如何显示和隐藏 spnner div，

Controller .js，

$scope.spinner =  base_url+image_spinner;
$scope.loading = true;

return $http({
   method: 'GET', 
   url:'server.php'
}).then(function(response) {
...

模板.html，

<div class="spinner" ng-show="loading"><img src="{{spinner}}"/> &nbsp  loading</div>

<div ng-repeat='type in summaries.types' >
</div>

在我看来，这并不理想。当您有很多模板并且您希望在填充模板之前在其中添加一个微调器时，这是相当乏味的。

最好搬家<div class="spinner" ng-show="loading"><img src="{{spinner}}"/> &nbsp loading</div>从模板中删除并在加载 json 数据之前添加它。可能吗？

这是加载模板和 Controller 的方式，

routes.js，

return app.config(['$routeProvider', function ($routeProvider) {

        $routeProvider
        .when("/",
        {
            templateUrl: base_url + "app/html/summary.html",
            controller: "Controller"
        })
        .when("/:module/:method/",
        {
            templateUrl: base_url + "app/html/summary.html",
            controller: "Controller"
        });
    }]);

Answer 1

您可以将模板放入指令中:

myModule.directive('nsSpinner', function () {
    return {
        restrict: 'AE',
        template: '<div class="spinner" ng-show="loading">' +
            '<img src="' + base_url + image_spinner + '"/> &nbsp loading' +
        '</div>';
    };
});

然后将其添加到您的 HTML 中:

<ns-spinner></ns-spinner>
<div ng-repeat="type in summaries.types"></div>