角噴油器錯誤嘗試使用角gridify

我試圖用角gridify以類似的方式來this，但我下面得到一個$注射器錯誤。我應該如何注入角柵格化依賴關係，假設問題是什麼？

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(); 
});

來源

2015-09-06 wnbates

在你的js您註冊testCtrl控制器，而不是ExampleCtrl控制器

來源

2015-09-06 17:04:23

Oops.Had在小提琴上進行了更改，但未將其更新爲testApp。它現在應該反映出來，而且我仍然遇到同樣的錯誤。 – wnbates

我也有sometim很難獲得使用JSFiddle運行的Angular應用程序。我把你的代碼，修改了一些，並把它放在Codepen：

http://codepen.io/cgav/pen/QjweXe?editors=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%; 
}

是th你正在尋找什麼？

編輯：請記住包括角網格化和角度路線的參考。

來源

2015-09-06 17:50:09 ccg

沒有css指定高度和寬度。模塊的部分功能是設置這些屬性，以便對不同大小的圖像正確工作。 – wnbates

角噴油器錯誤嘗試使用角gridify

回答

相關問題