У меня есть 2 страницы (я не использую angular 'routing - это ограничение).

В одном из них я хочу использовать директиву ui-grid, как в это демо:

var app = angular.module('myApp', ['ui.grid']);
app.controller('mainCtrl', function($scope) {
  $scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
  ];
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">

<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
  </div>
</div>

У меня вопрос, есть ли способ не вставлять зависимость ui-grid в приложение в любом случае, но только тогда, когда мне это нужно.

Что-то типа:

app.controller('mainCtrl', function($scope) {
   app.$inject('ui-grid');
});

Обновить

Я пробовал делать:

var ui_grid = $injector.get('ui-grid');

Но у меня ошибка:

Неизвестный поставщик: ui-gridProvider <- ui-grid

http://errors.angularjs.org/1.2.26/$injector/unpr?p0=ui-gridProvider%20%3C-%20ui-grid

9
Mosh Feu 17 Дек 2015 в 11:03

4 ответа

Лучший ответ

Core Angular API не предоставляет эту функцию. ocLazyLoad - популярная библиотека для отложенной загрузки модулей и компонентов в Angular.

Вы можете найти больше информации на их странице: https://oclazyload.readme.io

Или репозиторий GitHub: https://github.com/ocombe/ocLazyLoad

5
S.Klechkovski 22 Дек 2015 в 14:05

В моем проекте я динамически загружаю угловые модули, используя angular.bootstrap(). У меня есть несколько страниц с разными наборами модулей.

Пример:

var app = angular.module('demo', [])
.controller('WelcomeController', function($scope) {
  $scope.greeting = 'Welcome!';
});
angular.bootstrap(document, ['demo']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-controller="WelcomeController">
  {{greeting}}
</div>
1
Mosh Feu 20 Янв 2016 в 10:02

Core Angular API предоставляет эту функцию, просто используйте свойство 'require' модуля @ Properties section @ https://code.angularjs.org/1.4.7/docs/api/ng/type/angular.Module

var app = angular.module('myApp');

//Page 1 JS
//change below statement as per requirement in different pages
app.requires = ['ui.grid'];
app.controller('mainCtrl1', function($scope) {

}

//Page 2 JS
app.requires = ['ngResource', 'ui.bootstrap', 'ui.calendar'];
app.controller('mainCtrl2', function($scope) {

}

OcLazyLoad также является хорошим решением, но я думаю, что свойство 'require' решит вашу проблему без особых усилий.

2
FixBug Tester 21 Июл 2016 в 10:34

$injector используется для извлечения экземпляров объекта в соответствии с определением провайдера, создания экземпляров типов, вызова методов и загрузки модулей.

var $http = $injector.get('$http');

Для завершения вашего варианта использования:

app.controller('mainCtrl', function($scope, $injector) {
    $scope.myData = [];
    if($scope.loadGrid) {
        var ui_grid = $injector.get('ui-grid');
        ui_grid.load($scope.myData); //`.load` is just a guess, obviously read your docs
    }
});

Для получения дополнительной информации см .:

0
A T 17 Дек 2015 в 08:22