Question

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

的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>

Answer 1

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

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

Angularjs-更多模块依赖问题

1 个答案: