尝试使用角网格化时，Angular注入器出错

Angular Injector error trying to use angular-gridify

本文关键字：Angular 注入器 出错 网格化      更新时间：2023-09-26

这里有一个jsFiddle

我试图用类似的方式使用角网格，但我得到一个$injector错误如下。我应该如何注入角网格依赖，假设这就是问题所在?

Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
HTML: 

<body ng-app="ExampleApp" ng-controller="ExampleCtrl" ng-click="generateTiles()">
    <div class="gridify" ng-gridify="{wrapperSelector: '.wrapper', tileSelector: '.tile', perRow: 5, averageRatio: 1.5, gutter: 10, watch: 'tiles'}">
        <div class="wrapper">       
            <div ng-repeat="tile in tiles" class="tile" data-ratio="{{tile.ratio}}" style="background-color: {{tile.color}}">
                <img src="{{tile.src}}"></img>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
    <script type="text/javascript" src="angular-gridify.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
JavaScript: 

var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']).config(function() {});
testApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        controller: 'testCtrl'
    })
});
testApp.controller('testCtrl', function($scope) {
    $scope.tiles = [];
    $scope.generateTiles = function() {
        for (var i = 0; i < 50; i++) {
            var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
            $scope.tiles[i] = {
                ratio: ratio,
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
            };
        }
    };
    $scope.generateTiles();
});

在你的js中你注册了testCtrl controller而不是ExampleCtrl controller

我有时也很难让一个Angular应用运行JSFiddle。我拿了你的代码，稍微修改了一下，放到了Codepen:

http://codepen.io/cgav/pen/QjweXe?编辑= 111

JS: 

var testApp = angular.module('testApp', ['ngRoute', 'angular-gridify']);
testApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        controller: 'testCtrl'
    })
});
testApp.controller('testCtrl', function($scope) {
    $scope.tiles = [];
    $scope.generateTiles = function() {
        for (var i = 0; i < 50; i++) {
            var ratio = Math.random() > 0.6 ? 0.661 : 1.511;
            $scope.tiles[i] = {
                ratio: ratio,
                color: '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6)
            };
        }
    };
    $scope.generateTiles();
});
HTML: 

<div ng-app="testApp" ng-controller="testCtrl">
  <div class="gridify" ng-gridify="{wrapperSelector: '.wrapper', tileSelector: '.tile', perRow: 5, averageRatio: 1.5, gutter: 10, watch: 'tiles'}">
      <div class="wrapper">
          <div ng-repeat="tile in tiles" class="tile" data-ratio="{{tile.ratio}}" style="background-color: {{tile.color}}">
          </div>
      </div>
  </div>
</div>
CSS: 

body {
    margin: 0;
    padding: 10px;
}
.tile {
    width: 32px;
    height: 32px;
}
.tile > img {
    width: 100%;
    height: 100%;
}

这是你要找的吗?

编辑:记住要包括对angular-gridify和angular-route的引用。

相关文章：