如何在 Angularjs 中运行 jQuery 脚本答案

【问题标题】：How to run jQuery script in Angualrjs如何在 Angularjs 中运行 jQuery 脚本
【发布时间】：2016-01-16 13:52:16
【问题描述】：

我在我的项目中使用Nestable jquery 插件。要渲染 Nestable 插件和序列化，我需要运行 jquery 脚本。我的代码是：

 var updateOutput = function(e)
 {
   var list   = e.length ? e : $(e.target),
       output = list.data('output');
   if (window.JSON) {
     output.val(window.JSON.stringify(list.nestable('serialize')));
   } else {
     output.val('JSON browser support required for this demo.');
   }
 };

// activate Nestable for list 1
$('#nestable1').nestable({
  group: 1
})
.on('change', updateOutput);

updateOutput($('#nestable1').data('output', $('#nestable1-output')));

$('#nestable-menu-1').on('click', function(e)
{
  var target = $(e.target),
      action = target.data('action');
  if (action === 'expand-all') {
    $('#nestable1').nestable('expandAll');
  }
  if (action === 'collapse-all') {
    $('#nestable1').nestable('collapseAll');
  }
});

<!-- nestable1 start -->
<div class="dd" id="nestable1">
  <ol class="dd-list">
    <li class="dd-item" data-id="1">
      <div class="dd-handle">Item 1</div>
      <em class="badge pull-right bg-color-purple">99</em>
    </li>
    <li class="dd-item" data-id="2">
      <div class="dd-handle">
        Item 2
        <div class="pull-right action-buttons">
          <a class="blue" href="#">
            <i class=" fa fa-pencil "></i>
          </a>

          <a class="red" href="#">
            <i class=" fa fa-trash-o "></i>
          </a>
        </div>
      </div>
      <ol class="dd-list">
        <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>										                        
        <li class="dd-item" data-id="4">
          <div class="dd-handle">Item 4</div>
          <ol class="dd-list">
            <li class="dd-item" data-id="5"><div class="dd-handle">
              Item 5
              <i class="pull-right fa fa-exclamation-triangle warning"></i>
              </div></li>
            <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>										                               
          </ol>
        </li>
        <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>										                       
      </ol>
    </li>
    <li class="dd-item" data-id="8">
      <div class="dd-handle">Item 8</div>
    </li>

  </ol>
</div>
<!-- nestable1 end -->

如何在 AngularJs 中运行这个脚本来序列化数据。

【问题讨论】：

标签： javascript jquery angularjs jquery-plugins

【解决方案1】：

对我来说，在 Angular 中使用 jQuery（和其他 javascript）插件的最佳方式是用指令包装它们。这里有一篇不错的博客文章：

https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

我没有使用过嵌套插件，但是我看到有人已经为它创建了一个 Agular 包装器。希望它适合您的需求：

https://github.com/kamilkp/ng-nestable

【讨论】：