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

Posted 2023-04-13

【中文标题】Angularjs：如何将图层添加到外部模板中？

【英文标题】：Angularjs: how to prepend a layer into an external template?

【发布时间】：2014-01-01 13:49:28

【问题描述】：

我可以在模板中预先添加一个元素吗？例如，这是我当前的代码，它如何显示和隐藏一个 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"
        );
    ]);

【问题讨论】：

加载模板的代码是什么？

【参考方案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>

【讨论】：

谢谢。那我毕竟还需要在我的模板中添加<ns-spinner></ns-spinner>？？

【参考方案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>

【讨论】：

谢谢。所以我仍然需要在我的模板中添加<div spinner></div>？？

有了这个实现，是的。你可能会做一个更漂亮的实现来隐式地构造你的模板，但这不会很“Angular”。在我看来，在 HTML 中明确声明您的意图要简单得多，也更容易遵循，但需要注意的是每个模板都需要包含 <spinner> 指令。

您可以使用上面发布的类似技术将此微调器功能直接附加到您的<ng-repeat>，但请务必删除replace: true。这不是“角度黑客”，而是角度设计的方式。克服“我想要我的 jQuery”需要一段时间，但一旦你做到了，就没有回头路了。

我决定不更新答案。您可能可以这样做，但在我看来，这不值得麻烦。像这样的堆叠指令很快就会变得混乱。

***.com/questions/11703086/…