0
Я использую несколько модулей от http://mgcrea.github.io/angular-strap/ и древовидный вид: http://ngmodules.org/modules/angular.treeview, и у меня возникают проблемы при их загрузке. Например, я разделил treeview.js в 2 файлах: 1, содержащий контроллер, а другой содержащий директиву (как я видел на некоторых постах, что это хорошая практика для Углового):Angular JS - Загрузка модулей из разных файлов
app.js -> loading flexylaout модальный и сетка
var app = angular.module('app',['flexyLayout','ui.bootstrap','ngGrid']);
treeController.js
(function(){
app.controller('TreeCtrl', function($scope){
$scope.roleList1 = [
{ "roleName" : "Escapamentos e Catalisadores", "roleId" : "role1", "children" : [
{ "roleName" : "Silencioso Intermediario", "roleId" : "role12", "children" : [
{ "roleName" : "Composicao", "roleId" : "role121", "children" : [
{ "roleName" : "Material 1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Arquivo 1", "roleId" : "role2", "children" : [] },
{ "roleName" : "Arquivo 2", "roleId" : "role3", "children" : [] }
];
//test tree model 2
$scope.roleList2 = [
{ "roleName" : "Tubos", "roleId" : "role1", "children" : [
{ "roleName" : "Galvanizados", "roleId" : "role11", "collapsed" : true, "children" : [] },
{ "roleName" : "Conducao", "roleId" : "role12", "collapsed" : true, "children" : [
{ "roleName" : "Material 1", "roleId" : "role121", "children" : [
{ "roleName" : "Material 2", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 3", "roleId" : "role1212", "children" : [] }
]}
]}
]}
];
});
})();
directive.js
(function(){
app.directive('treeModel',function($compile){
return{
restrict:"A",
link:function(a,g,c){
var e=c.treeModel,
h=c.nodeLabel||"label",
d=c.nodeChildren||"children",
k='<ul><li data-ng-repeat="node in '
+e+'"><i class="collapsed" data-ng-show="node.'
+d+'.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.'
+d+'.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.'
+d+'.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.'
+h+'}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.'
+d+'" data-node-id='
+(c.nodeId||"id")+" data-node-label="
+h+" data-node-children="
+d+"></div></li></ul>";
e&&e.length&&(c.app?(a.$watch(e,function(m,b){
g.empty().html($compile(k)(a))
},
!1),
a.selectNodeHead=a.selectNodeHead||function(a,b){
b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();
b.cancelBubble=!0;
b.returnValue=!1;
a.collapsed=!a.collapsed
},
a.selectNodeLabel=a.selectNodeLabel||function(c,b){
b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();
b.cancelBubble=!0;
b.returnValue=!1;
a.currentNode&&a.currentNode.selected&&(a.currentNode.selected=void 0);
c.selected="selected";
a.currentNode=c
}):g.html($compile(k)(a)))
}
}
});
})();
Я хочу сделать это: когда страница загружается, дерево с этими данными должно появиться, но это не так. Перед тем, как расщепляется treeview.js, код был:
(function(){
//angular module
var myApp = angular.module('myApp', ['angularTreeview']);
//test controller
myApp.controller('myController', function($scope){
//test tree model 1
$scope.roleList1 = [
{ "roleName" : "Escapamentos e Catalisadores", "roleId" : "role1", "children" : [
{ "roleName" : "Silencioso Intermediario", "roleId" : "role12", "children" : [
{ "roleName" : "Composicao", "roleId" : "role121", "children" : [
{ "roleName" : "Material 1", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 2", "roleId" : "role1212", "children" : [] }
]}
]}
]},
{ "roleName" : "Arquivo 1", "roleId" : "role2", "children" : [] },
{ "roleName" : "Arquivo 2", "roleId" : "role3", "children" : [] }
];
//test tree model 2
$scope.roleList2 = [
{ "roleName" : "Tubos", "roleId" : "role1", "children" : [
{ "roleName" : "Galvanizados", "roleId" : "role11", "collapsed" : true, "children" : [] },
{ "roleName" : "Conducao", "roleId" : "role12", "collapsed" : true, "children" : [
{ "roleName" : "Material 1", "roleId" : "role121", "children" : [
{ "roleName" : "Material 2", "roleId" : "role1211", "children" : [] },
{ "roleName" : "Material 3", "roleId" : "role1212", "children" : [] }
]}
]}
]}
];
//roleList1 to treeview
$scope.roleList = $scope.roleList;
});
})();
(function(l){l.module("angularTreeview",[]).directive("treeModel",function($compile)
{return{restrict:"A",link:function(a,g,c)
{var e=c.treeModel,h=c.nodeLabel||"label",d=c.nodeChildren||"children",
k='<ul><li data-ng-repeat="node in '+e+'">
<i class="collapsed" data-ng-show="node.'+d+'.
length && node.collapsed" data-ng-click="selectNodeHead(node, $event)">
</i><i class="expanded" data-ng-show="node.'+d+'.length && !node.collapsed"
data-ng-click="selectNodeHead(node, $event)"></i>
<i class="normal" data-ng-hide="node.'+d+'.length"></i>
<span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">
{{node.'+h+'}}</span>
<div data-ng-hide="node.collapsed" data-tree-model="node.'+d+'
" data-node-id='+(c.nodeId||"id")+" data-node-label="+h+" data-node-children="+d+">
</div></li></ul>";
e&&e.length&&(c.angularTreeview?(a.$watch(e,function(m,b){
g.empty().html($compile(k)(a))},!1),
a.selectNodeHead=a.selectNodeHead||function(a,b){b.stopPropagation&&
b.stopPropagation();b.preventDefault&&b.preventDefault();b.cancelBubble=
!0;b.returnValue=!1;
a.collapsed=!a.collapsed},b.selectNodeLabel=a.selectNodeLabel||function(c,b){ b.stopPropagation&&b.stopPropagation();
b.preventDefault&&b.preventDefault();b.cancelBubble=!0;b.returnValue=!1;
a.currentNode&&a.currentNode.selected&& (a.currentNode.selected=void0;
c.selected="selected";a.currentNode=c}):g.html($compile(k)(a)))}}})})(angular);
все работает нормально, прежде чем я spllited этого файла (но я тестировал с 1 только модулем, другими словами, не флексите макета, сетка и т.д. только древовидный)
Я признателен за любые советы/предложения ..
Лукаса.