早上好,我正在尝试将此树视图用于Angular:https://github.com/eu81273/angular.treeview
这是我在HTML中使用的.js文件,我需要更改'this'的$ scope:
(function(){
var myApp = angular.module('myApp', ['angularTreeview']);
myApp.controller('myController', function($scope){
$scope.roleList1 = [
{ "roleName" : "Templates", "roleId" : "role1", "children" : [
{ "roleName" : "form_template", "roleId" : "role12", "children" : [
{ "roleName" : "index.html", "roleId" : "role1211", "children" : [] },
{ "roleName" : "index.jpg", "roleId" : "role1212", "children" : [] }
]},
{ "roleName" : "bootstrap-template", "roleId" : "role12", "children" : [
{ "roleName" : "index.html", "roleId" : "role1211", "children" : [] },
{ "roleName" : "index.jpg", "roleId" : "role1212", "children" : [] }
]},
{ "roleName" : "inbound_template", "roleId" :"role12", "children" : [
{ "roleName" : "index.html", "roleId" : "role2", "children" : [] },
{ "roleName" : "index.jpg", "roleId" : "role3", "children" : [] }
]}
]}
];
$scope.roleList = $scope.roleList1;
});
})();
(function(f){f.module("angularTreeview",[]).directive("treeModel",function($compile){return{restrict:"A",link:function(b,h,c){var a=c.treeId,g=c.treeModel,e=c.nodeLabel||"label",d=c.nodeChildren||"children",e='<ul><li data-ng-repeat="node in '+g+'"><i class="collapsed" data-ng-show="node.'+d+'.length && node.collapsed" data-ng-click="'+a+'.selectNodeHead(node)"></i><i class="expanded" data-ng-show="node.'+d+'.length && !node.collapsed" data-ng-click="'+a+'.selectNodeHead(node)"></i><i class="normal" data-ng-hide="node.'+
d+'.length"></i> <span data-ng-class="node.selected" data-ng-click="'+a+'.selectNodeLabel(node)">{{node.'+e+'}}</span><div data-ng-hide="node.collapsed" data-tree-id="'+a+'" data-tree-model="node.'+d+'" data-node-id='+(c.nodeId||"id")+" data-node-label="+e+" data-node-children="+d+"></div></li></ul>";a&&g&&(c.angularTreeview&&(b[a]=b[a]||{},b[a].selectNodeHead=b[a].selectNodeHead||function(a){a.collapsed=!a.collapsed},b[a].selectNodeLabel=b[a].selectNodeLabel||function(c){b[a].currentNode&&b[a].currentNode.selected&&
(b[a].currentNode.selected=void 0);c.selected="selected";b[a].currentNode=c}),h.html('').append($compile(e)(b)))}}})})(angular);
这是HTML文件:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1" />
</div>
<div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;">
<span><b>Archivo seleccionado</b> : {{mytree.currentNode.roleName}}</span>
</div>
<!--
[TREE attribute]
angular-treeview: the treeview directive
tree-id : each tree's unique id.
tree-model : the tree model on $scope.
node-id : each node's id
node-label : each node's label
node-children: each node's children
-->
<div
data-angular-treeview="true"
data-tree-id="mytree"
data-tree-model="roleList"
data-node-id="roleId"
data-node-label="roleName"
data-node-children="children">
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script type="text/javascript" src="angular.treeview.js"></script>
<link rel="stylesheet" type="text/css" href="css/angular.treeview.css">
<script type="text/javascript" src="algo.js"></script>
</body>
</html>
我尝试使用ngControllerAS,因为我不想使用$ scope。我需要使用'this'。
有没有办法更改.js文件以便使用它而不是$ scope? 我已经删除了$ scope作为函数中的参数,并更改了'this'的其他$ scope,但它不起作用。
提前致谢!