如何改變$範圍爲這個，因爲與控制器不工作

早上好，我試圖用這個樹視圖的角度：https://github.com/eu81273/angular.treeview

這是我在HTML中使用的.js文件，我需要改變$範圍爲 '本'：

(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> 
 
\t <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，因爲我不希望使用$範圍。我需要使用'this'。

是否有任何方法來改變.js文件，以便使用它而不是$ scope？我已經刪除了$ scope作爲函數中的參數，並將其他$ scope改爲'this'，但它不起作用。

在此先感謝！

來源

2016-12-23 elkaco

讓我看看，如果我理解。你要做的是使用* controllerAs *語法。是對的嗎？ – lealceldeiro

我需要用'this'替換$ scope，所以我必須使用controllerAs。問題是它不適用'this'而不是$ scope – elkaco

它應該是這樣的：

視圖（html的）

<div ng-controller="myController as vm"> 
    <!-- vm is your controller here now--> 
    <!-- you can access its properties by vm.MyProperty--> 
</div>

控制器（.js文件）

(function(){ 

    var myApp = angular.module('myApp', ['angularTreeview']); 

    myApp.controller('myController', function(){ 
     var vm = this; 

     vm.wizard = { 
     roleList : [ 
        //your data here 
        ]; 
     // all properties that should be visible in the view should be declared inside here 
     } 
     return vm.wizard; 

     //functions here 
    }); 

})();

來源

2016-12-23 15:35:38 lealceldeiro

嗨，謝謝你的回答。我嘗試了你所說的，但它仍然不起作用。在HTML中，我如何獲取數據？因爲使用$ scope我不必加載數據，如果我使用'this'它本身不會加載 – elkaco

使用這個語法（'myController as vm'），在你的html中你可以通過'vm' var。在控制器中，當你說'return vm.wizard'時，你正在將數據「導出」到實例化控制器的任何地方。請注意，在控制器中，'vm'是'this'的別名。 – lealceldeiro

我完全是這樣做的，但它仍然無效...可悲的是沒有數據。 – elkaco

如何改變$範圍爲這個，因爲與控制器不工作

回答

相關問題