Angular Smart table не работает

Я пытаюсь использовать таблицу Angular Smart. Но я получаю это сообщение об ошибке в браузере.

Error: [ng:areq] http://errors.angularjs.org/1.3.9/ng/areq?p0=safeCtrl&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:6:416
    at Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:19:417)
    at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:20:1)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:76:95)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:257
    at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:7:408)
    at v (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:124)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:52:9)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:51:118

Это мой HTML

<div ng-controller="safeCtrl">

    <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
        <i class="glyphicon glyphicon-plus">
        </i> Add random item
    </button>

    <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th st-sort="firstName">first name</th>
                <th st-sort="lastName">last name</th>
                <th st-sort="birthDate">birth date</th>
                <th st-sort="balance">balance</th>
            </tr>
            <tr>
                <th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in displayedCollection">
                <td>{{row.firstName}}</td>
                <td>{{row.lastName}}</td>
                <td>{{row.birthDate}}</td>
                <td>{{row.balance}}</td>
                <td>
                    <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                        <i class="glyphicon glyphicon-remove-circle">
                        </i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>

</div>
<script src="~/Scripts/CustomerView.js"></script>

а это мой Javascript:

angular.module('customerDetailTableApp', ['smart-table']).controller('safeCtrl', ['$scope', function($scope) {

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
    var id = 1;

    function generateRandomItem(id) {

        var firstname = firstnames[Math.floor(Math.random() * 3)];
        var lastname = lastnames[Math.floor(Math.random() * 3)];
        var birthdate = dates[Math.floor(Math.random() * 3)];
        var balance = Math.floor(Math.random() * 2000);

        return {
            id: id,
            firstName: firstname,
            lastName: lastname,
            birthDate: new Date(birthdate),
            balance: balance
        }
    }

    $scope.rowCollection = [];

    for (id; id < 5; id++) {
        $scope.rowCollection.push(generateRandomItem(id));
    }

    //copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
    $scope.displayedCollection = [].concat($scope.rowCollection);

    //add to the real data holder
    $scope.addRandomItem = function addRandomItem() {
        $scope.rowCollection.push(generateRandomItem(id));
        id++;
    };

    //remove to the real data holder
    $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }
}]);

Пробовал разными способами, но решения не нашел. Я использовал ng-app внутри тега html <html ng-app="myapp"> и контроллер в теге body <body ng-app="customerDetailTableApp">


person Saranga    schedule 20.01.2015    source источник


Ответы (1)


Вам нужно использовать только одно ng-приложение в своем представлении и включить (внедрить) второй модуль зависимостей в ваше первое ng-приложение.

Несколько директив ng-app на странице

Сколько ng-App может быть объявлено в Угловой JS?

angular.module('myapp', ['customerDetailTableApp']);
person rbinsztock    schedule 20.01.2015