AngularJs - 在链接函数内操作模板

Question

我有一个看起来像这样的指令

    interface IMyDirectiveScope extends ng.IScope {

        emptyOption: boolean;
        foo: boolean;
    }

    class MyDirective implements IMyDirective {

        require: string = 'ngModel';
        restrict: string = "AE";
        replace: boolean = true;
        transclude: boolean = true;

        scope = {
            foo: '=',

        };
        template: string = '<select class="something" ng-options="something"></select>';


    link = ($scope: IMyDirectiveScope , $element, $attrs, ngModelCtrl: ng.INgModelController) => {

        $scope.emptyOption = !(<any>$attrs).required;

 if ($scope.emptyOption) {
        var el = angular.element(this.template);
        var elementHtml = this.$compile('<option value="">-</option>')($scope);
        angular.element(el).append(elementHtml);
    }
};

我的选项是在链接函数中动态创建的，如果我的元素不需要选项，我想添加一个空选项，这就是为什么我试图追加这个<option>元素，但是我无法找到将其附加到模板元素的方法。我现在正在做的方式，var el得到了我想要的方式。

更新：我已经搜索了一点，我发现对于这种指令，我使用replace和transclude来操纵我需要{ {1}}在链接上，虽然我无法理解如何，任何帮助？我走在正确的轨道上？因为tranclude function对我没有任何帮助，我已经尝试了