我可以让Webix使用ui-router呈现子视图的唯一方法是使用单独的 webix-ui 指令，但这似乎不正确。有没有什么聪明的方法可以让这两个玩得很好？
问问题
653 次
2 回答
1
是的，绝对可以将 AngularJS UI 路由与 Webix 组件一起使用。这是一个小例子。
脚本文件由 Wbix 组件代码组成。对于每个 Angular Webix 集成，它都是强制性的。它存在于 JavaScript 文件中。
Angular UI 路由已使用“配置”完成，所有路由都在“模板”部分中提及。您可以将其替换为“TemplateUrl”字段和相应的文件名。
完整示例可以从这里下载：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>于 2017-10-11T06:59:07.453 回答
0
不知道，我占用BackboneJS，你可以看看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 });
于 2015-10-29T21:30:22.890 回答