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>

在我看来，这并不理想。当你有很多模板并且你想在它们被填充之前有一个微调器时，这是相当乏味的。

最好在加载 json 数据之前将<div class="spinner" ng-show="loading"><img src="{{spinner}}"/> &nbsp loading</div> 移出模板并前置。有可能吗？

这是加载模板和控制器的方式，

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>

Answer 2

这似乎是指令的完美用例。如果您想要不同的微调器图像，您也可以将指令设计为接受imageUrl。

angular.module('app').directive('spinner', function() {
    return {
        replace: true,
        restrict: 'A',
        scope: {
           imageUrl: '=',
           loading: '='
        },
        template: '<div class="spinner" ng-show="loading"><img src="{{ imageUrl }}" /> loading </div>'
    }
});

在您的 html 中，任何时候您想将微调器附加到 ajax，您只需声明 $scope.loading 和 $scope.imageUrl。 AJAX返回后，一定要设置$scope.loading = false;。

<div spinner imageUrl="path/to/img" loading="loading"></div>

如果您不喜欢向指令模板添加额外的属性，您可以做一些可定制性较低的事情：

angular.module('app').directive('spinner', function() {
    return {
        replace: true,
        restrict: 'A',
        template: '<div class="spinner" ng-show="loading"><img src="{{ imageUrl }}" /> loading </div>'
    }
});

假设您的范围仍然包含 loading 和 imageUrl，则模板将是：

<div spinner></div>