javascriptangularjsjstreeangular-ui-modal

add new node to desired folder


I'm trying to add node to desired folder but unfortunately without success. The idea is simple. By click button user sees modal where puts some params such as: name and description for node the value will come dynamically from http request, also he can select folder where he want to save his node but for some reason the node is appearing in each parent folder and I can't find where is my mistake? I've reproduced plunker with my problem

My code:

(function() {

  app.controller('HomeCtrl', ["$scope", "$rootScope", "$http", '$interval', '$q', "$log", "$routeParams", "$location", "$uibModal",
    function($scope, $rootScope, $http, $interval, $q, $log, $routeParams, $location, $uibModal) {


      $scope.tree_core = {
        multiple: false, // disable multiple node selection
        check_callback: function(operation, node, node_parent, node_position, more) {
          // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
          // in case of 'rename_node' node_position is filled with the new node name
          if (operation === 'move_node') {
            return false; // disallow all dnd operations
          }
          return true; // allow all other operations
        }
      };

      $scope.contextMenu = custom.contextMenu;

      // *** Begin Callback Functions for Tree ***
      // Describe callback function that to all necessary variables related with Jstree

      $scope.callback = function(e, data) {
        // ===== Click event on node for Industry =====
        for (var i = 0; i < data.selected.length; i++) {
          var parentNodeId = data.instance.get_node(data.selected[i]).parent;
          var parentNodeText = data.instance.get_node(parentNodeId).text;

          $scope.node = data.instance.get_node(data.selected[i]).text;
          $scope.path = data.instance.get_path(data.node, ' / ');

        }
      };

      // Declared initial folder

      $scope.filters = custom.sharedFilter;

      $scope.open = function() {

        var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          templateUrl: 'modal.html',
          controller: 'EventFilterCtrl',
          size: 'md',
          resolve: {
            items: function() {
              return $scope.filters;
            }
          }
        });

        modalInstance.result.then(function(selectedItem) {
          $scope.selected = selectedItem;
        }, function() {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };

      // Storing  variable in localstorage later will moved to DB
      // Data based on ui-modal and ui-grid callback functions

      $rootScope.saveFilter = function() {
        var $saveForm = $('#filter-save-form');
        var filterName = $saveForm.find('#filter-save-name').val();
        var filterDescription = $saveForm.find('#filter-save-description').val();

        $scope.item = {
          "text": filterName,
          "description": filterDescription,
          "value": Date.now(),
        };

        var i = 0;
        for (i; i < $scope.filters.length; i++) {
          if ($scope.filters[i]) {
            console.log("pass");
            $scope.filters[i].children.push($scope.item)
          }
        }

      };
      // ==== End Build Left Bar =====

    }
  ]);

}());

Solution

  • Your condition in save function is wrong :

    if ($scope.filters[i]) {
            console.log("pass");
            $scope.filters[i].children.push($scope.item)
          }
    

    $scope.filters[i] always return true. You must implement a correct condition to add new item in correct folder

    I forked your plunker and correct it to get selected node on modal and put it in save function : https://plnkr.co/edit/lReRGfPUkYAeRjs9K2Sv?p=preview