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

HTML:

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

.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
            };
        });

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

JS:

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

.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
            };
        });

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

指令（“percentageBar”，函数（$compile）{ 功能链接（范围、元素、属性、ctrl）{ //elem.empty（） elem=角度.element（“”.attr（“类”，“百分比巴伯”）； var left=angular.element（“”.attr（“class”，“percentageLeft”）.attr（“ng样式”，“leftStyle”）； var middle=angular.element（“”.attr（“class”，“percentageMiddle”）.attr（“ng样式”，“middleStyle”）； var right=angular.element（“”.attr（“class”，“percentageRight”）.attr（“ng样式”，“rightStyle”）； 元素append（$compile（左）（scope））； 元素追加（$compile（middle）（scope））； 元素追加（$compile（right）（scope））； console.log（elem）；//我可以在chrome开发工具中看到打印的结果，它是正确的。 } 返回{ 限制：“AE”， 范围：{ progressArray:“=”， progressXMax:“@”， progressYMax:“@”， }, 控制器：功能（$scope）{ $scope.leftStyle={ “高度”：$scope.progressArray[0]。y/$scope.progressYMax*100+'%， “宽度”：$scope.progressArray[0].x/$scope.progressXMax*100+'% }; $scope.middleStyle={ “高度”：$scope.progressArray[1]。y/$scope.progressYMax*100+'%， “宽度”：$scope.progressArray[1].x/$scope.progressXMax*100+'% }; $scope.rightStyle={ “高度”：$scope.progressArray[2]。y/$scope.progressYMax*100+'%， “宽度”：$scope.progressArray[2].x/$scope.progressXMax*100+'% }; }, 链接：链接 }; }); 请看一下链接功能的最后一句，我可以在chrome devtool的控制台上看到打印的结果，结果是正确的。但是我在ChromeDevTool的元素窗格中看不到dom元素

结果：

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

.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
            };
        });

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

我认为您首先应该将

链接

函数转换为

编译

函数。然后不再使用

$compile

：）不要手动构建模板。指令有一个模板属性…在我的例子中，元素的数量是固定的，所以我使用一个模板来完成这项工作。如果元素是动态的，@gustavohenke的建议可能是一个很好的解决方案，非常感谢。：）