Question

我必须使用angularjs执行以下功能不使用控件ID

这里是httml代码::

<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>

这是脚本

     $("#outterSpliter").ejSplitter({
    height: 250, width: 401,
    orientation: ej.Orientation.Vertical,
    properties: [{}, { paneSize: 80 }]
});

   $("#innerSpliter").ejSplitter();

Answer 1

要以Angular方式渲染Splitter，请使用指令＆＃39; ej-splitter ＆＃39;。所有JS组件属性都支持单向绑定。你需要添加前缀＆＃34; e - ＆＃34;属性。请参考以下代码以Angular方式呈现Splitter。

<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>

正如您在上面的代码段中所看到的，对于＆＃39; 电子属性＆＃39;，我已经指定了值＆＃34; new＆＃34;。＆＃34; e-properties＆＃34; splitter接收对象数组作为值。因此，在“脚本”部分中，我已将“拆分器”窗格属性的值分配给范围变量，并将其指定为电子属性的值。

脚本代码

<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>

如何使用angularjs使用syncfusion splitter

1 个答案: