AngularJS,使用transclude加载微调器指令?

时间:2015-10-17 06:31:51

标签: angularjs angular-directive angularjs-ng-transclude

我想在$ http请求执行时用show显示一个微调器。

我认为这会有用(例如加载用户):

主控制器

app.controller('UserListController', function($scope, $http) {

    $scope.users = [];
    $scope.loading = true;

    $http.get('/users').then(function(response) {
        $scope.users = response.data;
    }).finally(function() { $scope.loading = false; });

});

使用指令的模板

<div request-loading="loading">
    <ul>
       <li ng-repeat="user in users">{{ user.name }}</li>
    </ul>
</div>

请求加载-directive.js

app.directive('requestLoading', function() {
    return {
        scope: {
           requestLoading: '='
        },

        transclude: true, // I think this is not Ok

        templateUrl: 'request-loading-directive.html'
    };
});

请求加载-template.html

<div ng-show="requestLoading" class="super-cool-spinner">
    Loading text with the spinner...
</div>

// This is what is not working
// I thought the content of the users (ul and li) would be render in this div
// when the request is Ok.
<div ng-transclude ng-show="! requestLoading"></div>

任何帮助都会很好! THX。

0 个答案:

没有答案