Angularjs 由api填充的角度指令

为什么我使用此指令时不起作用。当我只使用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();
        }
    };
});

app.directive（'selectMaritalStatus'，函数（PersonApi）{
返回{
限制：'E'，
模板：函数（元素、属性）{
返回“”+
''+
“Selecione um Estado Civil”+
''+
'';
},
控制器：功能（$scope）{
$scope.loadSelect=函数（）{
PersonApi.getMaritalStatus（函数（数据、结果）{
var状态=[]；
for（数据中的var键。maritalStatus）{
status.push（data.maritalStatus[key]）；
}
$scope.maritalStatus=状态；
});
};
},
链接：功能（$scope）{
$scope.maritalStatus={}；
$scope.loadSelect（）；
}
};
});

工作

返回{
限制：'E'，
替换：正确，
控制器：功能（$scope）{
$scope.loadSelect=函数（）{
PersonApi.getMaritalStatus（函数（数据、结果）{
var状态=[]；
for（数据中的var键。maritalStatus）{
status.push（data.maritalStatus[key]）；
}
$scope.maritalStatus=状态；
});
};
},
链接：功能（$scope）{
$scope.maritalStatus={}；
$scope.loadSelect（）；
},
模板：“Selecione um Estado Civil”
};

---

我无法理解为什么它不适用于覆盖select的div。这只适用于replace true

尝试将模板放入外部.html文件并使用templateUrl:？看看这会不会有什么不同？@EliteOctagon不起作用。未填充select。它仅与replace:true一起工作，并且没有第一个div

        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>'

    };