Can we use this.$scope outside class?

//Sample code
var ui = {
	view: "form",
	elements: [
		{
			view: "text",
			name: "name",
			label: "Name",
			labelPosition: "top"
		},
		{
			view: "multicombo",
			name: "code",
			label: "Code",
			options: [],
			labelPosition: "top",
			tagMode: false
		},
		{
			view: "multiselect",
			name: "status",
			label: "Status",
			options: ["Draft", "Waiting", "Transit", "Available", "Done"],
			labelPosition: "top"
		},
		{},
		{
			cols: [
				{
					view: "button", value: "Filter", click: function () {
						this.$scope.renderTable();
					}
				},
				{
					view: "button", value: "Clear", type: "danger", click: function () {
						this.$scope.form_filter.clear();
						this.$scope.renderTable();
					}
				}
			]
		}
	]
}

var dtb = {
	view: "datatable",
	columns: [
		{
			id: "name",
			header: "Name",
		},
		{
			id: "code",
			header: "Code",
		},
		{
			id: "status",
			header: "Status",
		},
	],
	data: []
}

export default class ViewData extends JetView {

	config(){
		return {
			rows[
				ui,
				dtb
			]
		}
	}
	
	init(view, url){
		this.form_filter = view.queryView({view: "form"});
		this.datatable = view.queryView({view: "datatable"});
	}

	ready(){
		this.renderTable();
	}

	renderTable(){
		this.datatable.clearAll();
		this.datatable.load("url?" + jQuery.param(this.form_filter.getValues(), true), {
				success:  (text, xml, ajax) => {
					this.datatable.resize();
				}
			});
	}

}

  • this.$scope.form_filter.clear();
  • this.$scope.renderTable();

Or how to use like this?

{
	view: "button", value: "Filter", click: function () {
		this.$scope.app.getService("master").renderTable();
	}
},
{
	view: "button", value: "Clear", type: "danger", click: function () {
		this.$scope.app.getService("master").clearForm();
		this.$scope.app.getService("master").renderTable();
	}
}
init(view) {

	this.app.setService("master", {
		renderTable: () => this.renderTable(),
		clearForm: () => this.clearForm()
	});

}

if your have better solution please let me know.

Yep, sure.
The $scope is defined on a moment of UI creation. It doesn’t matter was the object defined inside of class or outside. While widget is created from some View, it will have $scope pointing to that View.

The approach with services is recommended for the case when you have separate Views and need to communicate between them. Though, in your case events will work better

    view: "button", value: "Filter", click: function () {
        this.$scope.app.trigger("FilterData", filter_value);
    }
//and in any other view
   this.app.on("FitlerData", v => this.renderTable(v))

Thanks, You’ve been very helpful.