组合不同的 angular 程序

Question

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

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

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

当我想在我的程序中使用 this one

为我的 detail.html 做视差效果时

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

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

在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

first-module.js helper文件夹下

angular.module("duParallax.helper", []).factory("parallaxHelper", function(){ return{ 获取数据：函数（）{ return "Sample Service"; } } });
second-module.js under directive folder

angular.module("duParallax.directive", []).directive("duParallax", function(){ return{ 限制："A"，模板网址："demo.html" } });
module.js 根文件夹下

angular.module("duParallax", ["duParallax.helper", "duParallax.directive"]).controller("mainController", function($scope, parallaxHelper){ $scope.onClick = 函数(){ console.log(parallaxHelper.getData()); } }); 试试吧，对你有帮助。

更新

module.js

var 模块 = angular.module("duParallax", ["duParallax.helper", "duParallax.directive"]).controller("mainController", function($scope, parallaxHelper) { $scope.onClick = 函数(){ console.log(parallaxHelper.getData()); } });

angular.module('app',['onsen',module.name]);
index.html

将 ng-app="duParallax" 替换为 ng-app="app"

试试这个。

组合不同的 angular 程序

Combine different angular programs

javascript

angularjs

onsen-ui

HTML

JS

更新