Проблема зависимости модуля Angularjs-more

Я использую больше модулей зависимостей для различных приложений. Я хочу показать ngtable используя директиву. но это не сработало. иногда нет ошибок, иногда я получаю после ошибки '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>
Источник

1 ответ

Решение

В ngTable-directive.js вы эффективно переписываете то, что вы определили в ngTable.js. Вы должны опустить второй параметр в angular.module(), Затем вы получите модуль вместо его переопределения.

Вы также должны разместить все теги скрипта либо внутри раздела head, либо в конце раздела body. Что касается Angular, я бы порекомендовал разместить все внутри головы, так как я мог представить, что начальная загрузка Angular (она прослушивает событие DOMContentLoaded) может помешать добавлению определенных модулей во времени (случайным образом).

Источник
Другие вопросы по тегам