0

我正在使用来自http://mgcrea.github.io/angular-strap/的一些模块和一个树视图：http ://ngmodules.org/modules/angular.treeview并且在加载它们时遇到问题。例如，我将 treeview.js 拆分为 2 个文件：1 个包含控制器，另一个包含指令（正如我在一些帖子中看到的那样，这是 Angular 的一个好习惯）：

app.js -> 加载 flexylaout、模态和网格

var app = angular.module('app',['flexyLayout','ui.bootstrap','ngGrid']);

树控制器.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" : [] }
        ]}
      ]}
    ]}
  ];
  });
})();

指令.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);

在我拆分该文件之前一切正常（但我只使用 1 个模块进行测试，换句话说，没有灵活的布局、网格等。只有树视图）

我很感激任何提示/建议..

卢卡斯。

4

1 回答 1

0

应该只有一个module声明来管理整个页面，并且该模块的名称将与ng-app. 您注入的所有模块都应该在您尝试注入它们之前加载到页面中......无法注入尚不存在的东西

您将所有其他依赖模块注入到ng-app主页面模块的依赖数组中。

初始化“ng-app”模块后，使用分配给它的变量来创建控制器/指令/服务等。

您有一个创建为的模块app，另一个创建为myApp. 要同时使用两者，您需要将不匹配ng-app的一个注入到匹配的那个

于 2013-11-14T18:17:22.667 回答