Is it possible to use Webix with AngularJs ui-router? - angularjs

Question

Only way I could get Webix to render subviews with ui-router was by using separate webix-ui directives but that does not seem right. Is there any clever way to make these two play nicely?

Answer 1

Yes its absolutely possible to use AngularJS UI routing with the Webix components. Here is the small example.
Script file consists of Wbix Component Code. It is mandatory for every Angular Webix Integration. It is present in the JavaScript file.
Angular UI routing has been done using the 'config' and all the Routes are mentioned inside the 'Template' section. You can replace this with the 'TemplateUrl' field and respective file names.
The Full example can be downloaded here from : https://github.com/TheAjinkya/AngularWebixApplication/tree/master/Angular_UI_Router_with_Webix_Tree
if (window.angular)
(function(){
function id_helper($element){
//we need uniq id as reference
var id = $element.attr("id");
if (!id){
id = webix.uid();
$element.attr("id", id);
}
return id;
}
function locate_view_id($element){
if (typeof $element.attr("webix-ui") != "undefined")
return $element.attr("id");
return locate_view_id($element.parent());
}
//creates webix ui components
angular.module("webix", [])
.directive('webixUi', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var dataname = $attrs["webixUi"];
var callback = $attrs["webixReady"];
var watch = $attrs["webixWatch"];
var wxRoot = null;
var id = id_helper($element);
$element.ready(function(){
if (wxRoot) return;
if (callback)
callback = $parse(callback);
//destruct components
$element.bind('$destroy', function() {
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//ensure that ui is destroyed on scope destruction
$scope.$on('$destroy', function(){
if (wxRoot && !wxRoot.$destructed && wxRoot.destructor)
wxRoot.destructor();
});
//webix-ui attribute has some value - will try to use it as configuration
if (dataname){
//configuration
var watcher = function(data){
if (wxRoot) wxRoot.destructor();
if ($scope[dataname]){
var config = webix.copy($scope[dataname]);
config.$scope =$scope;
$element[0].innerHTML = "";
wxRoot = webix.ui(config, $element[0]);
if (callback)
callback($scope, { root: wxRoot });
}
};
if (watch !== "false")
$scope.$watch(dataname, watcher);
watcher();
} else {
//if webix-ui is empty - init inner content as webix markup
if (!$attrs["view"])
$element.attr("view", "rows");
var ui = webix.markup;
var tmp_a = ui.attribute; ui.attribute = "";
//FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
if (typeof $attrs["webixRefresh"] != "undefined")
wxRoot = ui.init($element[0], $element[0], $scope);
else
wxRoot = ui.init($element[0], null, $scope);
ui.attribute = tmp_a;
if (callback)
callback($scope, { root: wxRoot });
}
//size of ui
$scope.$watch(function() {
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
}, function() {
if (wxRoot) wxRoot.adjust();
});
});
}
};
}])
.directive('webixShow', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var attr = $parse($attrs["webixShow"]);
var id = id_helper($element);
if (!attr($scope))
$element.attr("hidden", "true");
$scope.$watch($attrs["webixShow"], function(){
var view = webix.$$(id);
if (view){
if (attr($scope)){
webix.$$(id).show();
$element[0].removeAttribute("hidden");
} else
webix.$$(id).hide();
}
});
}
};
}])
.directive('webixEvent', [ "$parse", function($parse) {
var wrap_helper = function($scope, view, eventobj){
var ev = eventobj.split("=");
var action = $parse(ev[1]);
var name = ev[0].trim();
view.attachEvent(name, function(){
return action($scope, { id:arguments[0], details:arguments });
});
};
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var events = $attrs["webixEvent"].split(";");
var id = id_helper($element);
setTimeout(function(){
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
for (var i = 0; i < events.length; i++) {
wrap_helper($scope, view, events[i]);
}
});
}
};
}])
.directive('webixElements', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var data = $attrs["webixElements"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection){
setTimeout(function(){
var view = webix.$$(id);
if (view){
view.define("elements", collection);
view.refresh();
}
},1);
});
}
};
}])
.directive('webixData', [ "$parse", function($parse) {
return {
restrict: 'A',
scope: false,
link:function ($scope, $element, $attrs, $controller){
var data = $attrs["webixData"];
var id = id_helper($element);
if ($scope.$watchCollection)
$scope.$watchCollection(data, function(collection){
if (collection){
setTimeout(function(){
loadData($element, id, collection, 0);
},1);
}
});
}
};
}]);
function loadData($element, id, collection, num){
if (num > 10) return;
var first = $element[0].firstChild;
if (first && first.nodeType == 1)
id = first.getAttribute("view_id") || id;
var view = webix.$$(id);
if (view){
if (view.options_setter){
view.define("options", collection);
view.refresh();
}else{
if (view.clearAll)
view.clearAll();
view.parse(collection);
}
} else {
webix.delay(loadData, this, [$element, id, collection], 100, num+1);
}
}
})();
<!doctype html>
<html lang="en" ng-app="webixApp">
<head>
<meta charset="utf-8">
<title>Webix - Angular : Layouts</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
var app = angular.module('webixApp', [ "webix", 'ui.router' ]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/add");
$stateProvider
.state('/add', {
url : '/add',
template : 'This is the Routed Addition File'
})
.state('/sub', {
url : '/sub',
template : 'This is the Routed Subtraction File'
})
.state('/div', {
url : '/div',
template : 'This is the Routed Division File'
})
.state('/multi', {
url : '/multi',
template : 'This is the Routed Multiplication File'
})
})
app.controller('jsonCtrl', function($scope){
var treeData = { data: [
{id:"root", value:"Super Micro Flow", open:true, link : "add", data:[
{ id:"1", open:true, value:"AP1", link : "multi", data:[
{ id:"1.1", value:"2G09#M10000761", link : "div", data:[
{ id:"1.11", value:"2G09#M10000761", link : "add", data:[
{ id:"1.11", value:"2G09#M10000761", link : "sub" },
{ id:"1.12", value:"2G09#M10855757", link : "multi"},
{ id:"1.13", value:"2G09#D10PP0761", link : "div" }
] },
{ id:"1.12", value:"2G09#M10855757", link : "multi"},
{ id:"1.13", value:"2G09#D10PP0761", link : "div" }
] },
{ id:"1.2", value:"2G09#M10855757", link : "multi"},
{ id:"1.3", value:"2G09#D10PP0761", link : "div" }
]},
{ id:"2", open:false, value:"AP12", link : "multi",
data:[
{ id:"2.1", value:"2G09#M10000761", link : "sub" },
{ id:"2.2", value:"2G09#M10855757", link : "multi"},
{ id:"2.3", value:"2G09#D10PP0761", link : "div" }
]},
{ id:"3", open:false, value:"EP45", link : "div",
data:[
{ id:"3.1", value:"2G09#M10000761", link : "sub" },
{ id:"3.2", value:"2G09#M10855757", link : "multi"},
{ id:"3.3", value:"2G09#D10PP0761", link : "div" }
]},
{ id:"4", open:false, value:"CR7767", link : "sub",
data:[
{ id:"4.1", value:"2G09#M10000761", link : "sub" },
{ id:"4.2", value:"2G09#M10855757", link : "multi"},
{ id:"4.3", value:"2G09#D10PP0761", link : "div" }
]}
]}
]
}
$scope.myTree = {
view:"tree",
data: treeData,
template: "{common.icon()}{common.folder()}<a ui-sref='#link#' href='##link#'>#value#</a>",
}
})
</script>
</head>
<body ng-controller="jsonCtrl">
<div webix-ui type="space">
<div height="35">Welcome to Angular Webix App </div>
<div view="cols" type="wide" margin="10">
<div width="300">
<input type="text" placeholder="Type something here" ng-model="app">
Hello {{app}}!
<div webix-ui="myTree"></div>
</div>
<div view="resizer"></div>
<div view="tabview" >
<div header="Angular UI Routing Example">
<div ng-controller="jsonCtrl">
<div ui-view></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 2

I do not know, I occupy BackboneJS, you can look at the example of Webix
var routes = new (Backbone.Router.extend({
routes:{
"":"index",
"menu/:id":"pagechange",
},
pagechange:function(id){
console.log("Change Page to "+ id);
$$("page"+id).show();
}
}));
routes.navigate("menu/"+1010101, { trigger:true });