在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ AngularJS 自定義指令中ng-transclude里ng-repeat作

AngularJS 自定義指令中ng-transclude里ng-repeat作用于tr元素不起作用?

利用自定義指令封裝表格,遇到了個奇怪的問題,自定義指令里ng-transclude里的ng-repeat作用于tr時不起作用,但是換了下ul和li,ng-repeat又可以正常顯示。搞不懂了額
代碼如下

<body ng-app="aaa" ng-controller="aa">
    <test>
        <ul>
            <li ng-repeat="data in $data">
                <span>{{data.name}}</span>
                <span>{{data.age}}</span>
            </li>
        </ul>
    </test>

    <hr>

    <test>
        <tbody>
            <tr ng-repeat="data in $data">
                <td>{{data.name}}</td>
                <td>{{data.age}}</td>
            </tr>
        </tbody>
    </test>

    <hr>

    <table>
        <tr ng-repeat="c in cc">
            <td>{{c.name}}</td>
            <td>{{c.age}}</td>
        </tr>
    </table>

</body>
<script>
    var app = angular.module("aaa", []);
    app.controller("aa", function($scope) {
        $scope.cc = [
            {name: '小明', age: 12},
            {name: '小白', age: 23}
        ];
    });
    app.directive("test", function() {
        return {
            restrict: "E",
            template: "<div>2333<table ng-transclude></table></div>",
            transclude: true,
            link: function($scope) {
                $scope.$data = [
                    {name: 'zyh', age: 22},
                    {name: 'ljy', age: 24},
                    {name: 'jj', age: 23},
                ];
                // $scope.$data = [1, 2, 3];
            }
        };
    });
</script>

運行的結(jié)構(gòu)如下:
圖片描述

控制臺無報錯,求大佬解救一下小白啊。。

回答
編輯回答
萌二代

(以下為說法錯誤)

var ngTranscludeDirective = ngDirective({
  link: function($scope, $element, $attrs, controller, $transclude) {
    if (!$transclude) {
      throw minErr('ngTransclude')('orphan',
       'Illegal use of ngTransclude directive in the template! ' +
       'No parent directive that requires a transclusion found. ' +
       'Element: {0}',
       startingTag($element));
    }

    $transclude(function(clone) {
      $element.empty();
      $element.append(clone);
    });
  }
});

ng-transclude 這個指令,不是在節(jié)點中間插入內(nèi)容,而是把節(jié)點清空,在節(jié)點的后面 append 內(nèi)容。

tbody 又不能單獨存在(一定要包在 table 中),但是 ul 當然可以單獨存在。

2017年8月27日 03:53