Question

我想为“Tile”小部件创建一个指令。

问题：我无法操纵渲染的DOM元素。我试过：compile（），controller（），pre-link（）和post-link（）。 “Ng-If”变成了注释，而不是看到完全呈现的DOM元素。我想要那些“Ng-If”的内容。

我知道唯一可行的不优雅的解决方案是将我的代码放在$ timeout（...）中，但我担心它会导致异步问题，特别是创建了100多个tile。

有更优雅的解决方案吗？

的index.html ：

<div metro-tile json-layout-data="t" ng-repeat="t in tileData"></div>

template.html ：

<div>
    <a ng-if="mode == '1x1'">...</a>
    <a ng-if="mode != '1x1'">...</a>
</div>

directive.js ：

angular.module('...').directive('...',
['$log', '$timeout', blah, blah,
    function ($log, $timeout, blah, blah) {
        'use strict';

        return {
            restrict: 'AE',
            scope: {
                jsonContent: '=jsonContent'
            },
            templateUrl: "tpl/metro-tile.tpl.html",
            replace: true,
            controller: function( $scope, $element, $attrs, $transclude ) {
                $log.log("controller " + $element);
            },
            compile: function compile(tElement, tAttrs, transclude) {
                $log.log("compile " + tElement);
                return {
                    pre: function preLink(scope, iElement, iAttrs, controller) {
                        $log.log("prelink " + scope + " " + iElement);
                    },
                    post: function postLink(scope, iElement, iAttrs, controller) {
                        $log.log("postlink " + scope + " " + iElement);

                        //$timeout(function() {
                        //  $log.log(iElement.children());
                        //});
                    }
                }
            }
        };
    }]);

Answer 1

最后我决定保留$ timeout解决方案，因为它唯一的惩罚是在下一个摘要周期运行代码。

Angular Directive无法操纵DOM

1 个答案: