爲什麼我的AngularJS TreeView無法正常工作？

我想用這個interesting looking Angular treeview component，沒有運氣。爲什麼我的AngularJS TreeView無法正常工作？

我知道這不是瀏覽器問題，因爲當我從jsfiddle加載它時，它工作正常。（在Chrome上使用最新版本和IE瀏覽器，在Windows上試用過）

我會粘貼從GIThub使用說明下載的一些重要部件。

<html ng-app> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/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> 
     (function() { 
      //angular module 
      var myApp = angular.module('myApp', ['angularTreeview']); 
      //test controller 
      myApp.controller('myController', function ($scope) { 
       //test tree model 1 

       $scope.roleList1 = [ 
        { "roleName": "User", "roleId": "role1", "children": [ 
         { "roleName": "subUser1", "roleId": "role11", "children": [] }, 
         { "roleName": "subUser2", "roleId": "role12", "children": [ 
          { "roleName": "subUser2-1", "roleId": "role121", "children": [ 
                 . . . 
       ]; 
    </script> 
</head> 
<body> 
<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <div> 
      <input type="button" value="TREE MODEL 1" data-ng-click="roleList = roleList1"/> 
      <input type="button" value="TREE MODEL 2" data-ng-click="roleList = roleList2"/> 
     </div> 
     <div style="margin:10px 0 30px 0; padding:10px; background-color:#EEEEEE; border-radius:5px; font:12px Tahoma;"> 
      <span><b>Selected Node</b> : {{currentNode.roleName}}</span> 
     </div> 
     <div 
       data-angular-treeview="true" 
       data-tree-model="roleList" 
       data-node-id="roleId" 
       data-node-label="roleName" 
       data-node-children="children"> 
     </div> 
    </div> 
</div> 
</body>

這是我查看頁面時看到的內容。點擊按鈕什麼也不做。 enter image description here

有誰知道我可能會做錯什麼？

來源

2014-11-05 Victor Grazi

你可以調整jsFiddle來使用你的代碼嗎？另外，您是否在控制檯中看到任何錯誤消息？ – 2014-11-05 22:13:06

我看到錯誤：無法加載資源：net :: ERR_FILE_NOT_FOUND文件：/// C：/angular.treeview.js 錯誤：參數'myController'不是函數，在錯誤（本地）時出現undefined 錯誤 at bb（https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:17:103） at ra（https://ajax.googleapis.com/ajax/ libs/angularjs/1.0.8/angular.min.js：17：176） at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:53:60 在https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js:44:136 。。。 – 2014-11-05 22:42:41

我們的企業代理不允許我們看到JSFiddle。稍後需要在家中嘗試。（我能從平板電腦上查到的那個早期版本） – 2014-11-05 22:49:27

如果你的代碼是最新的，你還沒有關閉括號和括號。 {{currentNode.roleName}}在您的DOM中顯示的事實告訴我存在語法錯誤或其他問題。檢查你的調試器。

<script> 
    (function() { 
     //angular module 
     var myApp = angular.module('myApp', ['angularTreeview']); 
     //test controller 
     myApp.controller('myController', function ($scope) { 
      //test tree model 1 

      $scope.roleList1 = [ 
       { "roleName": "User", "roleId": "role1", "children": [ 
        { "roleName": "subUser1", "roleId": "role11", "children": [] }, 
        { "roleName": "subUser2", "roleId": "role12", "children": [ 
         { "roleName": "subUser2-1", "roleId": "role121", "children": [ 
                . . . 
      ]; 
     }); 
    })(); 
</script>

此外，根據意見，你可能想脫下/在你的路徑樹視圖。由於您在沒有Web服務器的情況下進行本地測試，因此您必須使用相對路徑。確保angular.treeview.js是在相同的目錄中的HTML，那麼腳本標籤更改爲：

<script type="text/javascript" src="angular.treeview.js"></script>

編輯還有一點：貌似你在html標籤，以及你body標籤有ng-app。剛剛從body到html移動標記，以便你有這樣的：

<html ng-app="myApp"> 
... 
<body>

來源

2014-11-05 23:50:17

運氣不多。我甚至將treeview代碼嵌入到停止錯誤的html頁面中，但仍然無法工作。讓我弄清楚如何使用Batarang調試器。 – 2014-11-06 15:28:08

你擁有的小提琴缺少屬性data-tree-id。我查看了樹視圖的源代碼，現在這似乎是一個必要的屬性（它有一個空檢查）。將您的聲明更改爲

<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>

來源

2015-04-05 13:45:34 Karthik

請檢查您傳遞的值。您稱它爲* data-tree-model =「roleList」*，但是在您寫入roleList1的數據中。

我認爲這是問題。

來源

2017-07-09 09:12:39 user2790547

爲什麼我的AngularJS TreeView無法正常工作？

回答

相關問題