scahitdemir/ng-split

Angular.js wrapper for Split.js https://scahitdemir.github.io/ng-split/

ng-split's Issues

split directive is showing blank

Hello,

I've installed the Split.Js and ng-split using bower and have configured it. I'm not getting any javascript or Angular errors.

I have used the below sample code but i cannot see anything on the page. any ideas? any help would be much appreciated.

<split direction="horizontal"> <split-area size="50"> <p>Lorem ipsum dolor sit amet...</p> </split-area> <split-area size="50"> <p>Sed ut perspiciatis unde omnis iste natus erro...</p> </split-area> </split>

Thank you

ng-split, ui-router and parent-child states

Hi!

If a I have a vertical split with two areas (20,80), and the second area (80%) has a element, and inside this another split but horizontal, this one doesn't work propertly.

<split direction="vertical">
	<split-area size="20">
        </split>
	<split-area size="80">
		<ui-view>
			<!-- template's html -->
                       <split direction="horizontal">
				<split-area size="20" ng-transclude>
				</split-area>
				<split-area size="80" ng-transclude>
				</split-area>
			</split>
		</ui-view>
	</split-area>
</split>

Sorry, found a solution:

<ui-view style="height: calc(100%);">

ui-view element needs a fixed height, width this tricky css you can set a "fixed" height dynamicly
(sorry my english!)

Adding/Removing SplitAreas in DOM doesn't dynamically reset the Split.

Hi,
Been looking at using this library after giving up on angular-ui-layout.

I've noticed this issue and believe its down to line 39;
$scope.$watch($scope.areas, function () {...

This needs to be;
$scope.$watchCollection('areas', function () {....

this watch will fire when child items are added or removed from the DOM.

Nested Transclusion

How would this be used with nested transclusion? For example:

app.html:

<my-component>
    <p>Hello world</p>
</my-component>

myComponent html template:

<split direction="horizontal" ng-transclude>
    <split-area size="50" ng-transclude>
        <div ng-transclude></div>
    </split-area>
    <split-area size="50" ng-transclude>
        <p>Hola mundo</p>
    </split-area>
</split>

The idea is that "Hello world" should be placed in the div of the first split-area tag, however, I keep getting an ng-transclude orphan error: https://docs.angularjs.org/error/ngTransclude/orphan?p0=%3Cdiv%20ng-transclude%3D%22%22%20class%3D%22ng-scope%22%3E

The error page mentions including "transclude: true" in the component declaration, but I've already done that. Any idea how to make this work?