Angularjs-more 模块依赖问题答案

【问题标题】：Angularjs-more module dependency issueAngularjs-more 模块依赖问题
【发布时间】：2014-11-24 06:26:33
【问题描述】：

我正在为各种应用程序使用更多依赖模块。我想显示 ngtable using 指令。但这不起作用。有时没有错误，有时我会跟随错误 'DemoCtrl' 控制器未定义。如何解决此问题。

index.html:

<!DOCTYPE html>
<html ng-app="mrm">
<head lang="en">
<meta charset="UTF-8">
<title>Application</title>

<link rel="stylesheet" href="css/ocModal.light.css">
<link rel="stylesheet" href="css/ocModal.animations.css">

<link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="css/ng-table.css" /> 

<script src="jquery-1.11.1.min.js"></script>
<script src="angular.min.js"></script>


<script src="app/app.js"></script>
</head>
<body>
<div class="container"> 
      <dpangTable></dpangTable> 
</div>

<script data-require="ng-table@*" data-semver="0.3.0" src="ng-table.js"></script>

<script src="ngTable/ngTable.js"></script>
<script src="ngTable/ngTable-directive.js"></script>
</div>
</body>
</html>

app.js：

(function () {
var app = angular.module('mrm', ['ngRoute', 'mrm.lightbox','mrm.ngtbls']);

 })();

ngTable.js：

(function(){

var app = angular.module('mrm.ngtbls',['ngTable']);
app.controller('DemoCtrl',['$scope','ngTableParams', function($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}];

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
         alert("asfasF");
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() *         params.count()));
    }
});
}]); 

})();

ngTable-directive.js：

(function(){ 
var app=angular.module('mrm.ngtbls',[]); 
app.directive('dpangTable',[function(){ 
    return {
        restrict:'E',
        replace:true,
        controller:'DemoCtrl',
        templateUrl:'app/views/ngTable.html',
        link:function(scope,element,attr){ 
        }
        } 
        }]); 
        })();

ngTable.html：

    <div ng-controller="DemoCtrl">
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>

    <table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
    </tr>
    </table>
    </div>

【问题讨论】：

标签： angularjs angularjs-directive angular-ui angularjs-module angularjs-model

【解决方案1】：

在 ngTable-directive.js 中，您有效地覆盖了您在 ngTable.js 中定义的内容。您必须省略 angular.module() 中的第二个参数。然后你将获取模块而不是重新定义它。

您还应该将 all 脚本标记放置在 head 部分内或 body 部分的末尾。关于 Angular，我建议将所有内容都放在 head 中，因为我可以想象 Angular 的引导（它侦听 DOMContentLoaded 事件）可能会阻止某些模块及时添加（随机）。

【讨论】：