Question

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

controller.js，

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

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

template.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>移出模板，然后 prepend 。有可能吗？

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

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>

Angularjs：如何将图层添加到外部模板中？

2 个答案: