how to use syncfusion splitter using angularjs - angularjs

Question

I need to make following functionality using angularJS without using id for controls
here is HTML code::
<div id="outterSpliter">
<div id="innerSpliter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<div>
<div class="cont">Pane 3 </div>
</div>
</div>
here is script
$("#outterSpliter").ejSplitter({
height: 250, width: 401,
orientation: ej.Orientation.Vertical,
properties: [{}, { paneSize: 80 }]
});
$("#innerSpliter").ejSplitter();

Answer 1

To render the Splitter in Angular way, use the directive 'ej-splitter'. All JS component properties support one way biding. You need to add the prefix "e-" to the properties. Refer the below code to render the Splitter in Angular way.
<div ng-controller="SplitCtrl">
<div ej-splitter e-height="250" e-width="401" e-orientation="vertical" e-properties="new">
<div ej-splitter e-width="401">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<div>
<div class="cont">Pane 3 </div>
</div>
</div>
</div>
As you can see in the above code snippet, for the 'e-properties', I have specified the value "new". The "e-properties" of splitter receives array of objects as value. So in the Script section I have assigned the values of Splitter pane properties to a scope variable and assigned it as value for e-properties.
Script code
<script>
angular.module('splitApp', ['ejangular']).controller('SplitCtrl', function ($scope) {
$scope.new = [{}, { paneSize: 80 }];
});
</script>
<style type="text/css" class="cssStyles">
.cont {
padding: 10px 0 0 10px;
}
</style>