angularjs - 由 api 填充的 Angular 指令

Question

为什么当我使用这个指令时不起作用。当我只使用 select 时效果很好？

不工作

app.directive('selectMaritalStatus', function (PersonApi) {
    return {
        restrict: 'E',
        template: function(element, attrs) {
            return '<div class="nice-select">'+
                        '<select class="form-control" ng-options="value for (key, value) in maritalStatus">'+
                            '<option value="">Selecione um Estado Civil</option>'+
                        '</select>'+
                    '</div>';
        },
        controller: function ($scope) {
            $scope.loadSelect = function () {
                PersonApi.getMaritalStatus(function (data, result) {
                    var status = [];
                    for (var key in data.maritalStatus) {
                        status.push(data.maritalStatus[key]);
                    }
                    $scope.maritalStatus = status;

                });
            };
        },
        link: function ($scope) {
            $scope.maritalStatus = {};
            $scope.loadSelect();
        }
    };
});

作品

        return {
        restrict: 'E',
        replace: true,
        controller: function ($scope) {
            $scope.loadSelect = function () {
                PersonApi.getMaritalStatus(function (data, result) {
                    var status = [];
                    for (var key in data.maritalStatus) {
                        status.push(data.maritalStatus[key]);
                    }
                    $scope.maritalStatus = status;

                });
            };
        },
        link: function ($scope) {
            $scope.maritalStatus = {};
            $scope.loadSelect();
        },
        template: '<select class="form-control" ng-options="value for (key, value) in maritalStatus"><option value="">Selecione um Estado Civil</option></select>'

    };

我不明白为什么它不适用于覆盖选择的 div。这仅适用于 replace true