Question

我编写了一个自定义 collapsable 指令，它将现有视图包装到一个容器中，该容器允许另一个指令，称为 collapser-button ，它实质上试图隐藏容器由 collapsable 指令提供。

可折叠

myApp.directive('collapsable', [
    '$compile',
    function ($compile) {
        return {
            scope: {
                screenId: '@'
            },
            restrict: 'E',
            controller: [
                '$scope',
                function ($scope) {
                    var self = {};

                    self.GetContainer = function (innerHtml) {
                        console.log(innerHtml);
                        var html = "<div id='" + $scope.id + "'>" + innerHtml + "</div>";

                        return html;
                    };

                    self.DoCallBack = function (targetContainerId) {
                        var container = $('#' + targetContainerId);

                        if (container.length > 0) {
                            container.hide("slow");
                        }
                    }

                    // --- //

                    $scope.GetContainer = self.GetContainer;

                    $scope.reference = {
                        doCallBack: self.DoCallBack, // This is a function parameter, DONT use () !!!
                        screenId: $scope.screenId
                    }
                }
            ],
            link: function ($scope, $elem, $attrs) {
                var html = $scope.GetContainer($elem.html());

                var linkFn = $compile(html);
                var content = linkFn($scope);

                $elem.html(content);
            }
        }
    }
]);

CollapserButton

myApp.directive('collapserButton', [
    '$compile',
    function ($compile) {
        return {
            restrict: 'E',
            scope: {
                parent: '='
            },
            transclude: true,
            controller: [
                '$scope',
                function ($scope) {
                    var self = {};

                    self.HandleButtonClick = function () {
                        $scope.parent.doCallBack($scope.parent.screenId);
                    }

                    // --- SCOPE --- //

                    $scope.HandleButtonClick = self.HandleButtonClick;
                }],
            link: function($scope, $elem, $attrs) {
                var html = '<button class="btn btn-primary" ng-click="HandleButtonClick()">Collapse</button>';
                var linkFn = $compile(html);
                var content = linkFn($scope);
                $elem.html(content);
            }
        }
}]);

用法

<collapsable screenid="screen1">
  ...
  ...
  ...
  <collapser-button parent="reference"/>
</collapsable>

这适用于静态测试设置，现在我想将它应用于真实世界的用例：

我有一个（单页）视图，其中包含：

<div ng-controller="personController">
    <table>
        <thead>
            <tr>
                <th style="width: 33%" translate>Firstname</th>
                <th style="width: 33%" translate>Firstname2</th>
                <th style="width: 34%" translate>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in people">
                <td>{{ person.Firstname }}</td>
                <td>{{ person.Firstname2 }}</td>
                <td>{{ person.Name }}</td>
            </tr>
        </tbody>
    </table>
</div>

然而，如果我将可折叠指令包裹在其周围，翻译和ng-repeater不再起作用，那么它本身就能很好地工作。

您可能已经注意到'collapsable'的GetContainer函数将innerHtml记录到控制台，对于当前设置，它返回此信息：

<div ng-controller="personController" class="ng-scope">
    <table>
        <thead>
            <tr>
                <th style="width: 33%" translate="" class="ng-scope">Firstname</th>
                <th style="width: 33%" translate="" class="ng-scope">Firstname2</th>
                <th style="width: 34%" translate="" class="ng-scope">Name</th>
            </tr>
        </thead>
        <tbody>
            <!-- ngRepeat: persoon in personen -->
        </tbody>
    </table>
</div>

有关如何解释/解决此问题的任何想法？

更新

这变得非常奇怪，如果我将一个不存在的函数添加到我的可折叠指令的链接中，则ng-repeat被正确呈现：

link: function($scope, $elem, $attrs) {
    var html = '<button class="btn btn-primary" ng-click="HandleButtonClick()">Collapse</button>';
    var linkFn = $compile(html);
    var content = linkFn($scope);

    FunctionThatDoesNotExist();

    $elem.html(content);
}

正如我所说，它现在正确呈现，但这并不意味着它是固定的，因为collapser按钮的父引用是未定义的，尽管它在父可折叠指令中正确定义。

我认为'$ compile操作不适用于完整的100％，即。并非所有Angular逻辑都被激活。

Plunkr

Plunkr

如果我在评论中放置第一个Blah（）（在script.js，第76行），我得到[[object HTMLDivElement]]：

link: function ($scope, $elem, $attrs) {
    var html = $scope.GetContainer($elem.html());

    var linkFn = $compile(html);
    var content = linkFn($scope);

    //Blah();

    $elem.html(content);
}

在ng-repeat内容

0 个答案: