向AngulrJS控制器添加依赖关系

我继承了一些AngularJS代码。它有这个向AngulrJS控制器添加依赖关系

function MainCtrl($scope) 
{ 
    // code goes here 
}; 

angular 
    .module('inspinia') 
    .controller('MainCtrl', MainCtrl)

现在我想添加一个自定义控制器，它将datepicker和timepicker组合到一个控件中。 GitHub项目是here，并且有一个演示Plunk here。

演示朋克宣布其为

var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']); 

app.controller('MyController', ['$scope', function($scope) {

控制器我如何添加到我的现有控制器？联合声明是什么？最好是我可以在我的ng-app上使用ng-stricti-di。

[更新]这里是我最好的猜测，我不能测试，直到我在10个小时左右回家。它看起来如何？

var myApp=angular.module('myApp', ['$scope','ui.bootstrap','ui.bootstrap.datetimepicker']); 

myApp.controller('MainCtrl', function($scope) 
{ 
    // code goes here, and can use ui.bootstrap and ui.bootstrap.datetimepicker 
    // which were injected into the app's module 
}]);

[更新2当我将其更改为

angular 
    .module('inspinia' ['ui.bootstrap', 'ui.bootstrap.datetimepicker']) 
     .controller('MainCtrl', MainCtrl)

我得到

错误：[$注射器：NOMOD] http://errors.angularjs.org/1.5.0/ $喷油器/ NOMOD P0 = undefinedError？ [$ injector：nomod] http://errors.angularjs.org/1.5.0/ $ injector/nomod？p0 = undefined

Despue inde x.html有

<script src="js/bootstrap/bootstrap.min.js"></script>

如何获得此项目使用ui boostrap及其datetpicker？

来源

2016-03-22 Mawg

这个问题似乎并不十分清楚。是否有原因不能将相同的依赖关系添加到应用程序中？你在某处遇到错误吗？ –

我太喜欢noob了。这两种似乎混合搭配风格。如果它很简单，你能告诉我怎么做？谢谢！ – Mawg

'ui.bootstrap'和'ui.bootstrap.datetimepicker'都是模块。这意味着它们只能被注入到其他模块中（在你的例子中是'MyApp'或'inspinia'）。根据我目前看到的所有内容，根本不需要改变控制器。在这里阅读模块：https://docs.angularjs.org/guide/module –

根据您在该问题下的评论，您的困惑与两段代码处理其依赖注入的方式有关。所以在我走之前，如果你还没有阅读documentation on dependency injection，那就在这里停下来阅读。它将包含所有答案和更多内容，并且如果处理Angular的时间超过五分钟，则需要了解这些内容。

要回答您的具体情况，您列出的顶级代码使用隐式注入控制器的工作，但不是安全的缩小，也不推荐。你找到的代码示例使用数组依赖注入控制器，这是更好和安全的缩小。第二个示例中的应用程序声明只是标准的模块依赖注入，不应该与您的应用程序中已有的不同。

所以用你找到所有你需要做的是正确的模块依赖关系添加到您的应用程序是这样的代码：

angular.module('inspinia', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']); 
angular.module('inspinia').controller('MainCtrl',MainCtrl); 
function MainCtrl($scope) { }

你的控制器似乎已经有了正确的依赖关系，因此不需要被改变（也就是说它不需要$scope之外的任何东西）。我使用第一个示例中的代码来展示如何更新当前代码，但理想情况下，您将使用控制器的第二版依赖注入。

您发生错误的更新是因为ui。bootstrap模块不是引导程序的一部分，而是angular-bootstrap project的一部分。你需要在你的页面中包含这些js。

这将是我的疏忽，如果我不继续前进，何况还有第三种方式使用$inject服务做的依赖注入。它在popular style guides中是首选，因为它很容易使用任务运行器自动运行。由于这个原因，这可以说是最好的选择。

来源

2016-03-22 19:36:54

）对不起，我不能完全从它那里解释出来，你的意思是我应该'.controller（'MainCtrl'，MainCtrl，['ui.bootstrap'，'ui.bootstrap.datetimepicker']）' ？ – Mawg

不，这个模块声明就像这个例子一样，所以你应该在'angular.modu le（'inspinia'，[]）'你会添加你的应用程序依赖关系。 –

我很欣赏你试图通过强迫我学习来帮助我，但是，在这里已经很晚了......难道你不能这么做，只是发布代码？ ;-)对不起，我现在必须去睡觉 – Mawg

请仔细阅读下列步骤操作：

你并不需要在你的应用程序的声明以注入$范围只是注入要使用外部模块，这种情况： “ui.bootstrap”和'ui.bootstrap.datetimepicker'。
```
angular.module('myApp', ['ui.bootstrap','ui.bootstrap.datetimepicker']) 
```
What is the combined declaration?

因为'ui.bootstrap.datetimepicker'只取决于'ui.bootstrap.dateparser'和'ui.bootstrap.position'但你还需要引导和模板功能包含在ui.bootstrap-tpls.js中。

确保在您的index.html

<link rel="stylesheet" ref="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.js"></script> 
<!-- make sure you download this file from the github project --> 
<script src="datetime-picker.js"></script>

How do I add that into my existing controller?

当你的应用程序申报控制器这个继承您已宣布所有模块依赖关系（注射），包括所需的上述文件，所以你不需要再做这个。在你的控制器，你应该创建一个对象文本存储为用户选择和变量来控制，当日期选择器打开时，这样的日期，时间：
```
angular.module('myApp').controller('MainCtrl', ['$scope', function($scope) { 
$scope.myDatetime = { 
    dateSelected: new Date(), 
    isOpen: false 
} 
}]); 
```

通话日期时间选择器指令在你的html中：

<html ng-app-="myApp"> 
<head> .... </head> 
<body ng-controller="MainCtrl"> 
<div class="input-group"> 
    <input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="myDatetime.dateSelected" is-open="myDatetime.isOpen" /> 
    <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="myDatetime.isOpen = !myDatetime.isOpen"><i class="fa fa-calendar"></i></button> 
    </span> 
</div> 
</body> 
</html>

我希望这对你有所帮助。

来源

2016-03-26 17:57:56 Germando

我非常希望能够帮助我（+1）。唉，当我再次尝试一个空的骨架项目并按照你的指示时，日期选择器不会弹出:-( – Mawg

这里是最小的应用程序，你将需要使用此日期选择器

HTML：

<body ng-app="inspinia"> 
    <div ng-controller="MainCtrl as ctrl"> 
    <h1>Datepicker Demo</h1> 
    <div class="row"> 
     <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup ng-model="ctrl.dt" is-open="ctrl.opened" close-text="Close" /> 
      <span class="input-group-btn"> 
       <button type="button" class="btn btn-default" ng-click="ctrl.open()"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p> 
     </div> 
    </div> 
    </div> 
</body>

的JavaScript：

(function() { 
    'use strict'; 
    angular.module('inspinia', ['ui.bootstrap']); 
    angular.module('inspinia').controller('MainCtrl', MainCtrl); 

    function MainCtrl() { 

    this.open = function() { 
     this.opened = true; 
    }; 

    this.opened = false; 
    } 
})();

在这里，我创建了一个plunker你，所以你可以尝试：

http://plnkr.co/edit/jEwT39sKcKtr8jbQa0uc?p=preview

来源

2016-03-30 18:32:01

向AngulrJS控制器添加依赖关系

回答

相关问题