JQuery 菜单编辑器与 AngularJS 1.5 不兼容

Question

我正在使用 AngularJS 版本 - 1.5 实现 Jquery 菜单编辑器

Jquery Link - https://www.jqueryscript.net/menu/Drag-Drop-Menu-Builder-For-Bootstrap.html
Jquery Demo - https://www.jqueryscript.net/demo/Drag-Drop-Menu-Builder-For-Bootstrap

当我尝试从编辑项添加新元素时，它给了我以下错误。

Cannot read property 'reset' of undefined
    at resetForm (<anonymous>:1182:18)
    at MenuEditor.add (<anonymous>:1323:9)

截图 - Jquery Menu Editor

我正在使用的 Jquery 版本 -

jquery.min.js - 3.1.1

我担心的是为什么我无法使用带有 AngularJS 1.5 版本的 Jquery 来重置表单。

Cannot read property 'reset' of undefined
    at resetForm (<anonymous>:1182:18)




 $scope.editor = new MenuEditor('myEditor', {listOptions: $scope.sortableListOptions, iconPicker: 
      $scope.iconPickerOptions});
    $scope.editor.setForm($('#frmEdit'));
    
    
    //Not able to add
    $('#btnAdd').click(function(){
            editor.add();
    });

如果有任何解决方案，请告诉我 - 会有所帮助。此外，如果您知道除此之外的任何其他插件，可以与 AngularJS 兼容，这对我也有很大帮助。

Answer 1

你不能把 jQuery 和 Angularjs 混为一谈。 Angularjs 非常强大，你可以构建自己的菜单编辑器，这是一个简单的工作演示

var MenuController = function($scope)
{
  $scope.navItem = [
    {
      name : "Home",
      link : '/',
    }
  ];
  
  $scope.consoleJson = function(){
    console.log($scope.navItem);
  }
  
  $scope.menuItem = {
    name : '',
    link : ''
  }
  
  $scope.addLink = function()
  {
    var item = Object.assign({},$scope.menuItem);
    $scope.navItem.push(item);
    $scope.menuItem =  {
    name : '',
    link : ''
  };
      
  }
  
}


const App =angular.module("menuEditor",[]);



App.controller("menuController", MenuController);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

<div  ng-app="menuEditor" ng-controller="menuController">
  <div class="contaniner">
    <div class="row">
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <h1>List</h1>
            <div class="card" ng-repeat="item in navItem">
              <div class="card-body">
                <p>Name : {{item.name}}</p>
                <p> Link : {{item.link}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
             <h1>form</h1>
            <input type="text" ng-model="menuItem.name" placeholder="Name" class="form-control" />
            <br>
             <input type="text" ng-model="menuItem.link" placeholder="Link" class="form-control" />
            <br>
             <button class="btn btn-primary float-left" ng-click="consoleJson()">
             Menu Json
            </button>
            <button class="btn btn-primary float-right" ng-click="addLink()">
              Add Link
            </button>
          </div>
        </div>
      </div>
    </div>
    </div>
</div>