9

angular私は 2 つのページを持っています (私は's routing- This 制約を使用しません)。

ui-gridそのうちの 1 つで、このデモのようにディレクティブを使用したいと考えています。

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

4

5 に答える 5

5

Core Angular API はこの機能を提供しません。ocLazyLoadは、Angular でモジュールとコンポーネントを遅延読み込みするための人気のあるライブラリです。

詳細については、 https ://oclazyload.readme.io のページを参照してください。

または GitHub リポジトリ: https://github.com/ocombe/ocLazyLoad

于 2015-12-22T14:05:33.100 に答える
3

コア Angular API はこの機能を提供します。モジュール @ Properties セクション @ https://code.angularjs.org/1.4.7/docs/api/ng/type/angular.Moduleの 'requires' プロパティを使用するだけです。

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 も良い解決策ですが、「requires」プロパティを使用すると、それほど労力をかけずに問題を解決できると思います。

于 2016-07-21T10:34:45.563 に答える
1

私のプロジェクトでは、を使用して角度モジュールを動的にブートストラップします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>

于 2015-12-28T13:22:57.020 に答える
0

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

詳細については、次を参照してください。

于 2015-12-17T08:06:20.263 に答える
0

モジュールを注入するための angularJS では、モジュール名の後にモジュールを注入する必要があります。

ただし、それを使用するにはいくつかの手順があります。

  1. この2つの方法でインストールするnpmかbower、以下のようにします。

    npm install angular-ui-grid

    bower install angular-ui-grid

  2. 次に、index.html に a を追加<script>します。

    <link rel="stylesheet" type="text/css"href="/bower_components/angularui-grid/ui-grid.css" />
<script src="/bower_components/angular-ui-grid/ui-grid.js"></script>
    • を使用する場合npmは、ソース パスを に変更する必要があります/node_modules/。

この手順の後、各モジュールは、以下のようにモジュールにアクセスできます。

angular.module('my.module', ['ui.grid']).

于 2015-12-24T16:21:24.457 に答える