CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directive
Dat Chu
Dat Chu

Reputation: 11130

Directive link function does not have access to the entire template DOM

I have a directive which has a template that recursively include a template. In my directive link function, I am unable to get the complete DOM with a selector.

Here is my directive. Notice that my directive try to call dropdown() function on all .ui.dropdown divs constructed so nested dropdown will be activated.

.directive("floatingDropdown", function() {
    return {
        restrict: 'E',
        templateUrl: "scripts/Ui/FloatingDropdown.html",
        replace: true,
        scope: {
            uiClass: '@',
            model: '=ngModel',
            optionTree: '='
        },
        link: function(scope, elem, attrs) {
            scope.elemClass = scope.uiClass || "ui floating dropdown icon button";
            $(elem).dropdown();
            $(elem).find(".ui.dropdown").dropdown();
        }
    }
})

The scripts/Ui/FloatingDropdown.html contains a nested include. This creates multiple levels of dropdowns

<div class="{{elemClass}}">
    <script type="text/ng-template" id="node_template.html">
        <div class="ui dropdown" ng-if="option.options">
            <span ><i class="dropdown icon"></i> {{option.value}}</span>
            <div class="menu" ng-if="data.options">
                <div class="item" ng-repeat="option in data.options" ng-include="'node_template.html'"></div>
            </div>
        </div>
        <span ng-if="!option.options" ng-click="model=option">{{option}}</span>
    </script>

    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" ng-repeat="option in optionTree.options" ng-include="'node_template.html'">
        </div>
    </div>
</div>

My problem is $(elem).find(".ui.dropdown") will not find the recursively generated divs by ng-include

Upvotes: 3

Views: 493

Answers (1)

Bryan M.
Bryan M.

Reputation: 17322

By attempting to do DOM manipulation in a directive's link() method like that, you're trying to query/modify a part of the DOM that hasn't been rendered yet.

You need to defer those jquery calls until later. You can do this using:

$scope.$evalAsync(function() {
  // DOM code
});

or

$timeout(function() {
 // DOM code
}, 0);

Using $evalAsync will run the expression during the next $digest cycle, will allow you to modify HTML before it's rendered in the browser. Using $timeout will wait until all $digest cycles are complete.

Upvotes: 5

Related Questions