Почему мой 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 для использования своего кода? Также вы видите сообщения об ошибках в консоли? –

Я вижу ошибку: Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND файл: /// C: /angular.treeview.js Ошибка: Аргумент 'myController' не является функцией, получил undefined at Error (native) на 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) по адресу 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 . , , –

Наш прокси-сервер не позволяет нам видеть JSFiddle. Нужно будет попробовать его из дома позже. (Раннее, что я смог проверить со своего планшета) –

Если ваш код в настоящее время, вы не закрыли свои скобки и скобки. Тот факт, что {{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>

Кроме того, согласно комментариям, вы, вероятно, хотите, чтобы снять / на своем пути к древовидному. Поскольку вы тестируете локально без веб-сервера, вам необходимо использовать относительные пути. Убедитесь, что angular.treeview.js находится в том же каталоге, что и HTML, а затем изменить тег сценария для:

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

EDIT Еще один момент: Похоже, у вас есть ng-app в вашем html теге, а также ваш body тега. Просто переместите тег из body в html поэтому у вас есть это:

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

источник

2014-11-05 23:50:17

Не повезло. Я даже ввел код дерева в html-страницу, которая остановила ошибку, но все еще не работает. Позвольте мне выяснить, как использовать отладчик Batarang. –

скрипку у вас есть отсутствует атрибут 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 не работает?

ответ

Смежные вопросы