如何为此更改$ scope,因为控制器不起作用

时间:2016-12-23 14:33:28

标签: javascript angularjs angularjs-scope treeview

早上好,我正在尝试将此树视图用于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,但它不起作用。

提前致谢!

0 个答案:

没有答案