在jQuery中调用AngularJS函数

Question

我想做这样的事情：

http://codepen.io/lukejacksonn/pen/PwmwWV?editors=001

在我的网站上，但我使用的是AngularJS。

主要问题是JS脚本。这是jQuery，我的问题是:它能与AngularJS一起工作吗？如果是的话--如何在Controller (或指令？-是DOM操作)中正确地编写此代码？

来自Codepen的代码：

联署材料：

var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');

var breaks = [];

function updateNav() {

  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;

  // The visible list is overflowing the nav
  if($vlinks.width() > availableSpace) {

    // Record the width of the list
    breaks.push($vlinks.width());

    // Move item to the hidden list
    $vlinks.children().last().prependTo($hlinks);

    // Show the dropdown btn
    if($btn.hasClass('hidden')) {
      $btn.removeClass('hidden');
    }

  // The visible list is not overflowing
  } else {

    // There is space for another item in the nav
    if(availableSpace > breaks[breaks.length-1]) {

      // Move the item to the visible list
      $hlinks.children().first().appendTo($vlinks);
      breaks.pop();
    }

    // Hide the dropdown btn if hidden list is empty
    if(breaks.length < 1) {
      $btn.addClass('hidden');
      $hlinks.addClass('hidden');
    }
  }

  // Keep counter updated
  $btn.attr("count", breaks.length);

  // Recur if the visible list is still overflowing the nav
  if($vlinks.width() > availableSpace) {
    updateNav();
  }

}

// Window listeners

$(window).resize(function() {
    updateNav();
});

$btn.on('click', function() {
  $hlinks.toggleClass('hidden');
});

updateNav();

减：

@color-1: #ff9800;
@color-2: #f57c00;
@color-3: #ef6c00;

body {
  min-width: 320px;
  padding: 30px;
  background: #ff9800;
  font-family: Helvetica, sans-serif;
}

h1 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
  font-size: 24px;
}

p {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}

a {
  color: #fff;
}

.greedy-nav {
  position: relative;
  min-width: 250px;
  background: #fff;

  a {
    display: block;
    padding: 20px 30px;
    background: #fff;
    font-size: 18px;
    color: @color-1;
    text-decoration: none;

    &:hover {
      color: @color-3;
    }
  }

  button {
    position: absolute;
    height: 100%;
    right: 0;
    padding: 0 15px;
    border: 0;
    outline: none;
    background-color: @color-2;
    color: #fff;
    cursor: pointer;

    &:hover {
      background-color: @color-3;
    }

    &::after {
      content: attr(count);
      position: absolute;
      width: 30px;
      height: 30px;
      left: -16px;
      top: 12px;
      text-align: center;
      background-color: @color-3;
      color: #fff;
      font-size: 14px;
      line-height: 28px;
      border-radius: 50%;
      border: 3px solid #fff;
      font-weight: bold;
    }

    &:hover::after {
      transform: scale(1.075);
    }
  }

  .hamburger {
    position: relative;
    width: 32px;
    height: 4px;
    background: #fff;
    margin: auto;

    &:before, 
    &:after {
      content: '';
      position: absolute;
      left: 0;
      width: 32px;
      height: 4px;
      background: #fff;
    }

    &:before {
      top: -8px;
    }

    &:after {
      bottom: -8px;
    }
  }

  .visible-links {
    display: inline-table;

    li {
      display: table-cell;
      border-left: 1px solid @color-1;
    }
  }

  .hidden-links {
    position: absolute;
    right: 0px;
    top: 100%;

    li {
      display: block;
      border-top: 1px solid @color-2;
    }
  }

  .visible-links li:first-child {
    font-weight: bold;
    a { color: @color-1 !important; }
  }

  .hidden {
    visibility: hidden;
  }
}

HTML：

<nav class='greedy-nav'>
<button><div class="hamburger"></div></button>
  <ul class='visible-links'>
    <li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li>
    <li><a href='#'>navigation</a></li>
    <li><a href='#'>that</a></li>
    <li><a href='#'>handles</a></li>
    <li><a href='#'>overflowing</a></li>
    <li><a href='#'>menu</a></li>
    <li><a href='#'>elements</a></li>
    <li><a href='#'>effortlessly</a></li>
  </ul>
  <ul class='hidden-links hidden'></ul>
</nav>
<h1>resize the window</h1>
<p>(animations with <a target="_blank" href="http://codepen.io/lukejacksonn/pen/gpOrmd">actuate</a> coming soon)</p>

Answer 1

它能与AngularJS一起工作吗？

jQuery将与AngularJS合作。它不在乎您是否使用/不使用AngularJS。同样，AngularJS对jQuery也有同样的感觉。

要使jQuery工作-它只需要一个jQuery object来执行操作。要使AngularJS工作-它期望角度相关的properties是完整的，而不是被外部因素，如jQuery删除。

jQuery也将与AngularJS -是一起工作。

您是否应该将jQuery与AngularJS -无结合使用。

如果是，那么如何在Controller (或指令)中正确地编写这段代码?这是DOM操作吗？

编写了一个指令--称它为贪婪的导航菜单/greedyNavMenu或您喜欢的任何东西。以attribute的形式传递object中的菜单项，并让directive来处理行为。

我很方便地要求您避免使用jQuery并“编写一个指令”来执行DOM操作而不使用jQuery。

下面是执行DOM操作所需的内容

https://docs.angularjs.org/api/ng/function/angular.element

也要获得input for angular element -使用JavaScript的document.getElementBy*

您可以在jQuery包中获得jqLite库的一个子集--您可以通过angular element使用它。

如果您不满意jqLite中的函数--继续添加jQuery，但是确保它们包含在使用angular apply的digest循环中，并且只在directive中使用jQuery。

进一步阅读- http://ng-learn.org/2014/01/Dom-Manipulations/

Answer 2

如果您还将JQuery添加到您的页面，这将工作良好。您可以将代码粘贴到控制器中，并将其插入HTML：

<div ng-controller="NavController">
    <nav class='greedy-nav'>
    ...
</div>

编写自定义指令是可能的，也是推荐的，但会更复杂。

还请注意，角支持JQuery alreay的一个子集，在这里有更多的介绍：https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

您需要将jQuery代码重写为角样式。比如说，使用指令。

虽然不推荐，但您可以简单地将jQuery代码移动到控制器/指令中。jqLite提供jQuery的一个子集。如果在角度之前加载jQuery，那么jqLite === jQuery。