AngularJS指令未显示链接函数中附加的元素

Question

HTML：

<div class="test">
  <percentage-bar progress-array="slaInfo" progress-x-max="100" progress-y-max="100">
   </percentage-bar>
</div>

JS：

.directive("percentageBar", function ($compile) {
            function link(scope, elem, attr, ctrl) {
                // elem.empty()
                elem = angular.element("<div />").attr("class", "percentageBarBox");
                var left = angular.element("<div />").attr("class", "percentageLeft").attr("ng-style", "leftStyle");
                var middle = angular.element("<div />").attr("class", "percentageMiddle").attr("ng-style", "middleStyle");
                var right = angular.element("<div />").attr("class", "percentageRight").attr("ng-style", "rightStyle");
                elem.append($compile(left)(scope));
                elem.append($compile(middle)(scope));
                elem.append($compile(right)(scope));
                console.log(elem);// I can see the result printed in the chrome devtool, it's correct.
            }

            return {
                restrict: "AE",
                scope: {
                    progressArray: "=",
                    progressXMax: "@",
                    progressYMax: "@",
                },
                controller: function ($scope) {
                    $scope.leftStyle = {
                        'height': $scope.progressArray[0].y / $scope.progressYMax * 100 + '%',
                        'width': $scope.progressArray[0].x / $scope.progressXMax * 100 + '%'
                    };
                    $scope.middleStyle = {
                        'height': $scope.progressArray[1].y / $scope.progressYMax * 100 + '%',
                        'width': $scope.progressArray[1].x / $scope.progressXMax * 100 + '%'
                    };
                    $scope.rightStyle = {
                        'height': $scope.progressArray[2].y / $scope.progressYMax * 100 + '%',
                        'width': $scope.progressArray[2].x / $scope.progressXMax * 100 + '%'
                    };
                },
                link: link
            };
        });

请看一下链接函数的最后一句，我可以看到在chrome devtool的控制台中打印的结果，结果是正确的。但是我无法在chrome devtool的Elements面板中看到dom元素。

结果：

<div class="test">
    <percentage-bar progress-array="slaInfo" progress-x-max="100" progress-y-max="100" class="ng-isolate-scope">
    </percentage-bar>
</div>