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

Posted 2023-05-09

【中文标题】JQuery 菜单编辑器与 AngularJS 1.5 不兼容

【英文标题】：JQuery Menu Editor is not Compatible with AngularJS 1.5

【发布时间】：2020-11-13 23:37:37

【问题描述】：

我正在使用 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 兼容，这对我也有很大帮助。

【参考方案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>

【讨论】：

非常感谢！！！你搞定了。这对我来说是一个非常有价值的答案。再次感谢。

很高兴听到这个消息，如果对您有帮助，请点赞或将其标记为 anwser。干杯