Добавление зависимостей в контроллер AngularJS

Question

Добавление зависимостей в контроллер AngularJS

0

Я унаследовал некоторый код AngularJS. У этого есть

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

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

Теперь я хочу добавить пользовательский контроллер, который сочетает в себе датпикер и таймер в один элемент управления. Проект GitHub находится здесь и есть демонстрационный Plunk здесь.

Демонстрационный панк объявляет свой контроллер как

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

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

Как добавить это в мой существующий контроллер? Что такое объединенная декларация? Предпочтительно, чтобы я мог использовать его с ng-stricti-di в моем ng-app.

[Обновить] здесь мое лучшее предположение, которое я не могу проверить, пока не вернусь домой через 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 module
}]);

[Обновить 2 [Когда я меняю его на

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

я получил

Ошибка: [$ injector: nomod] http://errors.angularjs.org/1.5.0/ $ инжектор /nomod? P0 = undefinedError: [$ injector: nomod] http://errors.angularjs.org/1.5.0/ $ инжектор /nomod? p0 = undefined

Despue index.html, имеющий

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

Как мне получить этот проект для использования ui boostrap и его датпикера?

Mawg 22 март 2016, в 20:15

Источник

1

Вопрос, кажется, не очень ясен. Есть ли причина, по которой вы не можете добавить те же зависимости в свое приложение? Вы где-нибудь получаете ошибку?
Matthew Green 22 март 2016, в 19:23
0

Я слишком много нуб. Эти два, кажется, смешивают и соответствуют стилям. Если это просто, не могли бы вы показать мне, как? Спасибо!
Mawg 22 март 2016, в 19:25
1

ui.bootstrap и ui.bootstrap.datetimepicker являются модулями. Это означает, что они могут быть введены только в другие модули (в ваших примерах либо MyApp либо inspinia ). Вам вообще не нужно менять контроллер, основываясь на всем, что я видел до сих пор. Прочитайте модули здесь: docs.angularjs.org/guide/module
Matthew Green 23 март 2016, в 13:40
0

Вы действительно героически терпеливы со мной здесь. За что большое спасибо. Ссылка, которую вы даете, на самом деле не касается введения модулей в модули. Тем не менее, я сделал еще один удар и обновил последнюю часть вопроса. Это правильно сейчас?
Mawg 23 март 2016, в 13:57
1

Я обновил ответ, чтобы попытаться прояснить ситуацию, когда вижу, с чем вы боретесь.
Matthew Green 23 март 2016, в 14:13
0

И я только что внес небольшое изменение, которое переписало ваше :-( Я восстановил ваше изменение. Я вижу, что мне не нужно , ui_bootstrap, ui_bootstrap_datetimepicker ui_bootstrap_datetimepicker в контроллер, - потому что они уже введены в модуль приложения (?). Я попробую ваше обновление сегодня вечером. Еще раз спасибо за ваше терпение ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h, научивший меня ловить рыбу.
Mawg 23 март 2016, в 14:20
1

Во фрагменте кода, который вы вставили в обновление 2, вы пропускаете запятую (,) между именем модуля «inspinia» и списком его зависимостей. Это может быть причиной ошибки.
Kiran Reddy 29 март 2016, в 05:49
0

Спасибо (+1), но, увы, это не помогло :-(
Mawg 29 март 2016, в 07:26

Показать ещё 6 комментариев

Теги:

angularjs

dependency-injection

controller

3 ответа

Ещё вопросы

Вопрос, кажется, не очень ясен. Есть ли причина, по которой вы не можете добавить те же зависимости в свое приложение? Вы где-нибудь получаете ошибку?
Я слишком много нуб. Эти два, кажется, смешивают и соответствуют стилям. Если это просто, не могли бы вы показать мне, как? Спасибо!
ui.bootstrap и ui.bootstrap.datetimepicker являются модулями. Это означает, что они могут быть введены только в другие модули (в ваших примерах либо MyApp либо inspinia ). Вам вообще не нужно менять контроллер, основываясь на всем, что я видел до сих пор. Прочитайте модули здесь: docs.angularjs.org/guide/module
Вы действительно героически терпеливы со мной здесь. За что большое спасибо. Ссылка, которую вы даете, на самом деле не касается введения модулей в модули. Тем не менее, я сделал еще один удар и обновил последнюю часть вопроса. Это правильно сейчас?
Я обновил ответ, чтобы попытаться прояснить ситуацию, когда вижу, с чем вы боретесь.
И я только что внес небольшое изменение, которое переписало ваше :-( Я восстановил ваше изменение. Я вижу, что мне не нужно , ui_bootstrap, ui_bootstrap_datetimepicker ui_bootstrap_datetimepicker в контроллер, - потому что они уже введены в модуль приложения (?). Я попробую ваше обновление сегодня вечером. Еще раз спасибо за ваше терпение ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h ^ h, научивший меня ловить рыбу.
Во фрагменте кода, который вы вставили в обновление 2, вы пропускаете запятую (,) между именем модуля «inspinia» и списком его зависимостей. Это может быть причиной ошибки.
Спасибо (+1), но, увы, это не помогло :-(

Germando · Answer 1 · 2016-03-26T15-35-00.000Z

Просмотрите следующие шаги:

Вам не нужно вводить ваш $ scope в объявлении вашего приложения, просто вводите внешние модули, которые вы хотите использовать, для этого случая: "ui.bootstrap" и "ui.bootstrap.datetimepicker".
```
angular.module('myApp', ['ui.bootstrap','ui.bootstrap.datetimepicker'])
```
Что такое объединенная декларация?

Поскольку "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>

Как добавить это в мой существующий контроллер?

Когда вы объявляете свой контроллер, это наследует все зависимые от модуля зависимости, которые вы объявили (ввели) для приложения, поэтому вам не нужно это делать снова. В вашем контроллере вы должны создать литерал объекта для хранения даты, выбранной для пользователя, и переменной, которая будет контролироваться при открытии механизма выбора даты, например:
```
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>

Надеюсь, это поможет вам.

Я очень благодарен вам за то, что вы взяли книгу, а не пытались мне помочь (+1). Увы, когда я снова перечитал с пустым проектом скелета и следовал твоим инструкциям, средство выбора даты не появляется :-(

Matthew Green · Answer 2 · 2016-03-22T17-49-00.000Z

Основываясь на вашем комментарии в вопросе, ваша путаница связана с тем, как две части кода обрабатывают инъекцию зависимостей. Поэтому, прежде чем я пойду дальше, если вы не прочитали документацию об инъекции зависимостей, тогда остановитесь прямо здесь и прочитайте ее. У него будут все ваши ответы и многое другое, и вам нужно знать, обрабатывать ли углы дольше пяти минут.

Чтобы ответить на конкретный случай, который у вас есть, верхний код, который вы указали, использует неявный впрыск для контроллера, который работает, но не безопасен для минимизации и не рекомендуется. Образец кода, который вы нашли, использует для ввода значения для зависимостей массива, который лучше и безопаснее для минимизации. Объявление приложения во втором примере представляет собой стандартную инъекцию зависимости от модуля и не должно выглядеть иначе, чем то, что вы уже имеете в своем приложении.

Таким образом, чтобы использовать код, который вы нашли, все, что вам нужно сделать, это добавить правильные зависимости модуля к вашему приложению:

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

У вашего контроллера, похоже, уже есть правильные зависимости, поэтому его не нужно менять (что, скажем, ему не нужно ничего за пределами $scope). Я использовал код из вашего первого примера, чтобы показать, как будет обновляться текущий код, но в идеале вы бы использовали вторую версию инъекции зависимости для своего контроллера.

Обновление, которое у вас есть с ошибкой, связано с тем, что модуль ui.bootstrap не является частью бутстрапа, а является частью проекта углового бутстрапа. Вам нужно включить эти js на свою страницу.

Было бы ошибкой, если бы я не пошел дальше и упомянул, что есть третий способ сделать инъекцию зависимостей, используя службу $inject. Это предпочтительнее в ряде популярных руководств по стилю, потому что легко использовать бегун задачи для автоматизации. Это, пожалуй, лучший вариант для использования по этой причине.

Нет, извините, я не могу понять это из этого. Вы имеете в виду, что я должен .controller('MainCtrl', MainCtrl, ['ui.bootstrap', 'ui.bootstrap.datetimepicker']) ?
Нет, это относится к объявлению модуля, как в примере. Таким образом, у вас будет код где-то вроде angular.module('inspinia', []) которому вы добавите зависимости своего приложения.
Я действительно ценю, что вы пытаетесь помочь мне, заставляя меня учиться, но здесь уже очень поздно ... не могли бы вы, довольно пожалуйста, просто опубликовать код? ;-) Извините, мне пора идти спать
Я обновил вопрос, но я не уверен, могу ли я быть намного более ясным, чем это. Может быть, свежие глаза и / или кофе в порядке.
Увы, я все еще застрял. Так застрял, что теперь есть щедрость на вопрос
У меня нет ссылок, так как я нахожусь на моем телефоне, но я обновил ответ. В основном вы не включаете правильный JS для того, что вы пытаетесь использовать.

Sergei Svekolnikov · Answer 3 · 2016-03-30T17-28-00.000Z

Вот минимальное приложение, которое вам нужно будет использовать для этого datepicker

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;
  }
})();

Здесь я создал плункер для вас, чтобы вы могли попробовать:

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