Как управлять видимостью компонента

В отличие от обычных HTML элементов, вы не можете прятать и показывать компоненты Webix с помощью соответствующих директив ngShow и ngHide.

Webix компоненты создаются с помощью конструктора webix.ui(), который вызывается директивой webix-ui.

<body ng-app="Webix App">
    <div style="width:800px;"></div> <!--обычный HTML элемент-->
    <div webix-ui type="wide">
        <!--все div внутри этого элемента (включая его самого) 
        инициализируются как компоненты Webix-->
    </div>
</body>

Чтобы показывать и прятать компоненты Webix, используйте директиву webix-show. Помните, что все div без атрибута view инициализируются как templates.. Компоненты изначально спрятаны.

<div webix-ui type="wide">
    <div width="200" webix-show="showLeft">Left</div>
</div>

Директива webix-show объявляет переменную, значение которой (true или false) может меняться определенным событием. В этом случае используется клик по кнопке:

<!--показывает компонент-->
<button ng-click="showLeft=true">Show Left</button>
 
<!--прячет компонент-->
<button ng-click="showLeft=false">Hide Left</button>

Related sample: Webix-Angular:Visibility

Наверх