Question

在我的项目中，我包括：JQuery，JSTree，Angular和NgJsTree。每当我更新我的treeData模型时，数据更改都不会反映在树中。

    tcwsApp.service('explorerService', ['$http', '$log', '$timeout',
      function($http, $log, $timeout) {
        var service = this;

        service.treeData = {
          rootNodes: [{
            "text": "Initial node"
          }]
        };

        return ({
          getTreeData: getTreeData,
          initService: initService
        });

        function initService() {
          getRootNodes();
        }

        function getTreeData() {
          return service.treeData;
        }

        function getRootNodes() {
          var request = $http.get("api/explorer");

          request.then(function(response) {
            $log.debug(response);
            service.treeData.rootNodes = response.data.list;
          }, function(response) {
            $log.error(response);
          });
        }
      }
    ]);

    tcwsApp.controller('explorerController', ['$log', 'explorerService',
      function($log, explorerService) {
        var explorer = this;
        explorerService.initService();
        explorer.treeData = explorerService.getTreeData();

        explorer.applyChanges = function() {
          return true;
        };

        explorer.treeConfig = {
          core: {
            multiple: false,
            animation: true,
            error: function(error) {
              $log.error('treeCtrl: error from js tree - ' + angular.toJson(error));
            },
            check_callback: true,
            worker: true
          },
          version: 1,
          plugins: ['types', 'checkbox']
        };
      }
    ]);

    tcwsApp.directive('explorerTree', function() {
      return {
        templateUrl: 'app/template/explorer_tree.html'
      };
    });

<!DOCTYPE HTML>
<html ng-app="tcwsApp">

<head>
  <meta charset="utf-8">
  <title>TCWS</title>

  <link rel="stylesheet" href="lib/jstree/themes/default/style.min.css" />
  <link rel="stylesheet" href="lib/lht-bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="lib/lht-bootstrap/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="app/tcws_app.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="lib/angular-messages.js"></script>
  <script src="lib/jstree/jstree.js"></script>
  <script src="lib/jstree/ngJsTree.js"></script>

  <script src="lib/lht-bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

  <tcws-app>
    <!-- directive contents pasted -->
    <explorer-tree>
      <div class="col-md-4" ng-controller="explorerController as explorer">
        <div js-tree="explorer.treeConfig" ng-model="explorer.treeData.rootNodes" should-apply="explorer.applyChanges()" tree-events="ready:readyCB;create_node:createNodeCB" tree="explorer.treeInstance">
          {{explorer.treeData.rootNodes}}
        </div>
    </explorer-tree>
  </tcws-app>

  <script src="app/tcws_app.js"></script>
  <script src="app/controller/explorer_tree.js"></script>
</body>

</html>

这将显示初始节点 - 但是在http.get请求完成后，通过{{explorer.treeData.rootNodes}}的调试输出会正确更新。

Resulting web page

Answer 1

Jstree有两种json格式：

默认：节点w / children
替代方案：节点w / parent

模型更改的自动更新只能使用此处所述的替代格式：Github Issue。

如何让NgJsTree应用模型更新？

1 个答案: