AngularJs - 包括指令

时间:2015-01-24 20:54:57

标签: angularjs angularjs-directive

在我们的应用程序中,我们有app.js,高级内容如下。

 var app = angular.module('testApp', [ 'ngResource', 'ngRoute', ui.bootstrap', 'infinite-scroll']).config(function($locationProvider) {
      $locationProvider.html5Mode(false);
     });

      var appEmail = angular.module('testAppEmail', ['mnpi', 'ngTagsInput',     'ui.tinymce']);

此app.js已包含在所有html文件中。

我想在其中一个html中包含treeGrid,比如treeTest.html,因此,在treeTest.html中添加了tree-grid-directive.js。

这个html文件有一个单独的js(treeTest.js)。

treeTest.html,

<html ng-app='testApp'>

<script src='js/jquery/jquery-1.11.1.min.js'></script>
<script src='js/jquery/jquery-ui-1.10.4.min.js'></script>
<link rel="stylesheet" href="css/jquery-ui.min.css" />

<script src="js/angularjs/angular.min.js"></script>
<script src="js/angularjs/angular-resource.min.js"></script>
<script src="js/angularjs/angular-route.min.js"></script>
<script type="text/javascript" src="js/angularjs/tree-grid-directive.js"></script>

<script src="js/test/controllers/treeTest.js"></script>

<body ng-controller="treeTestCtrl">

 <div ng-if="loadingIsDone">
            <tree-grid tree-data="tree_data" 
                  tree-control="my_tree" 
                  col-defs="col_defs" 
                  expand-on="expanding_property" 
                  on-select="my_tree_handler(branch)" 
                  expand-level="1" 
                  icon-leaf= "">
              </tree-grid>
              </div>  

在treeTest.js中,

angular.module('testApp').controller(

//app.controller(
        'treeTestCtrl',
        function($scope, $location, $http, $modal, $log, $window,
                referenceDataService, windowService, dealDataService) {

//     loading data for the tree and set the JSON array for the tree
}

现在,如果我在app.js中包含treeGrid指令,treeGrid工作正常,如下所示。

var app = angular.module('testApp', [ 'ngResource', 'ngRoute', 'ui.bootstrap', 'infinite-scroll','treeGird']).config(function($locationProvider) {
    $locationProvider.html5Mode(false);
});

但问题是,因为它被添加到app.js,所以预计在所有页面中都包含tree-grid-directive.js。 有没有办法,我可以在不添加app.js的情况下包含treeGrid指令,这样我就不必在所有页面中包含tree-grid-directive.js。

谢谢, Baskar.S

1 个答案:

答案 0 :(得分:0)

也许你可以动态构造依赖数组,例如:

// additional dependencies here, this is the "dynamic part"
var dynamicDeps = ['treeGird'];

// common code
var deps = ['ngResource', 'ngRoute', 'ui.bootstrap', 'infinite-scroll'];
angular.forEach(dynamicDeps, function(dep) {
    deps.push(dep);
});
var app = angular.module('testApp', deps).config(function($locationProvider) {
    $locationProvider.html5Mode(false);
});

var appEmail = angular.module(...);
...