Question

在我的离子angularJS应用程序中，我试图添加一个带有移动文本的加载页面。我发现了一个CSS模板，里面有一个JS代码。

我的问题是使用"$"（这是我猜的节点，不是吗？），我试图在我的控制器中添加"$"作为依赖，但是我在＆＃39;我遇到unknown provider错误。

因为IONIC是一个angularJS模板而angularJS是纯JS，我想可以使用这个函数，但是怎么做呢？

＆＃13;

// MY CONTROLLER ** NOT WORKING ** 
.controller('loadingCtrl', ['$scope', '$stateParams', '$', function ($scope, $stateParams, $) {

// Wrap every letter in a span
$('.ml9 .letters').each(function(){
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
  .add({
    targets: '.ml9 .letter',
    scale: [0, 1],
    duration: 1500,
    elasticity: 600,
    delay: function(el, i) {
      return 45 * (i+1)
    }
  }).add({
    targets: '.ml9',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

}])

＆＃13;

.ml9 {
  position: relative;
  font-weight: 200;
  font-size: 4em;
}

.ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 1em;
}

＆＃13;

<ion-view title="Loading" style="background-color:#94D0F1;">
  <ion-content padding="true">
    <h1 class="ml9">
      <span class="text-wrapper">
        <span class="letters">Loading ...</span>
      </span>
    </h1>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

  </ion-content>
</ion-view>

＆＃13;

Answer 1

您必须运行以下命令npm install --save-dev @ types / jquery ，并将其导入您的模块

Answer 2

$是由jQuery window定义的常量，这就是为什么它通常可以在网络应用中全局访问。您不必注入它，因为在angularjs中直接使用jQuery经常有替代方法。我建议你不要在控制器中编写ui特定代码，而是使用指令，因为控制器的意图应该是容纳业务逻辑，指令可以用来操作DOM。

那说：发生错误的原因是你试图使用angularjs不知道的命名注入器$来注入它。您可以注册它，然后根据需要注入它。创建应用程序后添加以下行。另外，请确保在角度脚本之前在HTML 中注册jquery脚本，以便window.jQuery存在。

app.constant('$', window.jQuery)

另见

Pass jQuery dependency to angular js controller

How to use jQuery in AngularJS

如何使用＆＃34; $＆＃34;在离子angularJS应用程序？

2 个答案: