javascript - 组合不同 Angular 程序

Question

我使用了OnsenUI框架并编写了一个简单的程序(参见我的codepen)

在该程序中我使用了 var module = angular.module('app', ['onsen']);

每个工厂和函数都基于 var 模块，并且我没有单独的指令、服务或过滤器文件夹。

当我想使用this one在我的程序中为我的detail.html做视差效果时

我很困惑如何将这个概念融入到我的程序中。

该程序在文件夹directives/parallax.js、services/helper.js 和 module.js 下有 angular.module('myApp', ['duParallax']) 和三个文件

在 parallax.js 中

angular.module('duParallax.directive', ['duScroll']).
directive('duParallax',
  function($rootScope, $window, $document, duParallaxTouchEvents){
...
}

在helper.js中

angular.module('duParallax.helper', []).
factory('parallaxHelper',
  function() {
...
});

在 module.js 中

angular.module('duParallax', ['duScroll', 'duParallax.directive', 'duParallax.helper']).value('duParallaxTouchEvents', true);

关于如何让它在我的程序上运行有什么建议吗？

Answer 1

首先，我们假设您已包含这些文件

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//oblador.github.io/angular-scroll/0.6.2/angular-scroll.min.js"></script>
<script src="//oblador.github.io/angular-parallax/angular-parallax.min.js"></script>

接下来，您必须将其包含在您的模块中:

angular.module('myApp', ['duParallax'])

接下来，在 Controller 中注入(inject) parallaxHelper(请参阅 Angular Dependency Injection )，并使用 parallaxHelper.createAnimator(transition):

.controller('MyCtrl', function($scope, parallaxHelper){
    $scope.background = parallaxHelper.createAnimator(-0.3);
  }

最后，使用 Controller 中使用的相应范围变量，在 html 中插入要应用视差的点。在前一种情况下:

<section ng-controller="MyCtrl">
  <img src="img.png" du-parallax y="background" alt="" />
</section>

这应该就是全部了!来源:Quick start guide