javascript - Run script when angular element's children have completed linking -

javascript - Run script when angular element's children have completed linking -

i want know best way construction simple angularjs scenario.

i have <div> contains 2 other <div>s. when dom ready, utilize jquery splitter plugin create 2 children sizable.

in plain old html, no problem! looks this:

<div id="container"> <div id="leftpane">...</div> <div id="rightpane">...</div> </div> <script> $('#container').split('horizontal'); </script>

now want turn components angularjs directives, , i'm running problem. here's root html template:

<div id="container" ng-controller="containerctrl"> <left-pane></left-pane> <right-pane></right-pane> </div>

where leftpane , rightpane directives like:

app.directive('leftpane', function(){ homecoming { templateurl: 'leftpane.html', replace: true } });

with leftpane.html:

<div id="leftpane"></div>

and container controller:

app.controller('containerctrl', ['$scope', function($scope){ $('#container').split('horizontal'); }]);

the problem @ time .split() phone call happens, kid panels have not been compiled , evaluated yet.

where / how should phone call .split() ensure children have been evaluated , in dom properly?

*** update: here plunker demonstrating issue: http://plnkr.co/edit/idodf0ztbqip44rfszse?p=preview

interestingly there no issue when using literal templates (template:'<div>left panel</div>'). issue arises when using templateurl. guess templateurl evaluated in different order?

the easiest way tell what's happening @ dom while resizing splitter. can see plugin dynamically setting width. not attached left panel. @ time plugin initialized, left pane hasn't been added dom yet.

if other way around, this:

view:

<div my-splitter="vertical" class="container"> <left-pane my-splitter-split></left-pane> <right-pane></right-pane> </div>

directive:

app.directive('mysplitter', function() { homecoming { restrict: 'a', link: function(scope, element, attrs, ctrl) { ctrl.orientation=attrs.mysplitter; }, controller: function($element){ this.split = function(){ var orientation= this.orientation; $element.split({ orientation: orientation }); } } }; }); app.directive('mysplittersplit', function(){ homecoming { require: '^mysplitter', restrict: 'a', link: function(scope, element, attrs, splitterctrl) { splitterctrl.split(); } }; }); working example

javascript jquery angularjs