Question

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

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

每个工厂和职能都基于var module，并且我没有针对指令或服务或过滤器的单独文件夹。

当我想使用this one

在我的程序中对 detail.html 进行视差效果时

我很困惑如何将这个概念融入我的计划中。

此程序有angular.module('myApp', ['duParallax'])和文件夹指令/ parallax.js，services / helper.js和module.js

下的三个文件

在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'])

接下来，在您的控制器中注入parallaxHelper（请参阅Angular Dependency Injection），然后使用parallaxHelper.createAnimator(transition)：

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

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

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

那应该是全部！资料来源：Quick start guide

Answer 2

我附上有组织的工作代码：

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
  <script src="angular.js"></script>
  <script src="directives/second-module.js"></script>
  <script src="helper/first-module.js"></script>
  <script src="module.js"></script>
</head>
<body ng-app="duParallax">
    <div ng-controller="mainController">
         <input type="button" value="Login" ng-click="onClick()" />
    </div>
</body>
</html>

JS

helper文件夹下的first-module.js

angular.module（“duParallax.helper”，[]）。factory（“parallaxHelper”，function（）{ 返回{ getData：function（）{ 返回“样品服务”; } } }）;
指令文件夹
下的second-module.js
angular.module（“duParallax.directive”，[]）。directive（“duParallax”，function（）{ 返回{ 限制：“A”， templateUrl：“demo.html” } }）;
在根文件夹
下的module.js
angular.module（“duParallax”，[“duParallax.helper”，“duParallax.directive”]）。controller（“mainController”，function（$ scope，parallaxHelper）{ $ scope.onClick = function（）{ 的console.log（parallaxHelper.getData（））; } }）; 试试吧，会帮到你。

更新

module.js

var module = angular.module（“duParallax”，[“duParallax.helper”，“duParallax.directive”]）。controller（“mainController”，function（$ scope，parallaxHelper）{ $ scope.onClick = function（）{ 的console.log（parallaxHelper.getData（））; } }）;

angular.module（'app'，['onsen'，module.name]）;
的index.html

用ng-app =“app”替换ng-app =“duParallax”

试试这个。

结合不同的角度程序

2 个答案:

HTML

JS

更新