ng-dropdown-multiselect library not working for me - javascript

I found this cool library to do dropdown menus with angularjs + twitter-bootstrap-3, here:
http://dotansimha.github.io/angularjs-dropdown-multiselect/docs.
I am following the examples, I have this in my html:
<div ng-dropdown-multiselect="" options="stringData" selected-model="stringModel" extra-settings="stringSettings">
</div>
And this in my controller:
$scope.stringData = ['a', 'b', 'c'];
$scope.stringModel = [];
$scope.stringSettings = {
template: '{{option}}',
smartButtonTextConverter: function(skip, option) {
return option;
},
};
And yet, absolutely nothing is being rendered to the page. :(
Anybody have any idea what might be wrong?
I have twitter-bootstrap-3, angularjs and ng-dropdown-multiselect loaded in this order:
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angularjs-dropdown-multiselect/dist/src/angularjs-dropdown-multiselect.js"></script>

When I add the dependency here:
angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'ngDropdownMultiselect']);
I get this error:
jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngDropdownMultiselect due to:
Error: [$injector:nomod] Module 'ngDropdownMultiselect' 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.
http://errors.angularjs.org/1.6.1/$injector/nomod?p0=ngDropdownMultiselect
So I checked the docs (again), and it says to use this instead
angular.module('app', ['ui.router', 'ngAnimate', 'ngSanitize', 'angularjs-dropdown-multiselect']);
now it "works"
ughh, gotta love front-end development lol

var app = angular.module('app', [
'ngAnimate',
'ui.select',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.jq',
'app.directive.voucherView',
'abp'
]).filter('angularjs-dropdown-multiselect', function () { });

Related

Injecting dependency angularMoment returning error

I'm trying to access moment.js API, injecting angularMoment as a dependency into my module but it's returning error:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=momentProvider%20%3C-%20moment%20%3C-%20transCtrl
I'm following the docs provided by https://github.com/urish/angular-moment but an error keeps being returned. Any idea why?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<script src="scripts/app.js"></script>
var app = angular.module('myApp', ['ngRoute', 'angularMoment']);
app.controller('transCtrl', ['moment', function(moment){
$scope.date = new moment();
}]);
Here is the detail on how to use angular-moment
https://github.com/urish/angular-moment
You have to include both moment.js and angular-moment.js in your application.
Well, after you included the moment.js script before angular-moment.min.js as I suggested in the comments to your question - You now have a simple error in your controller:
app.controller('transCtrl', ['$scope', 'moment', function($scope, moment){
You just need to inject $scope into your controller.

How to fix Angular JS Error: [$injector:modulerr]

I am having a problem with Angular JS receiving an error
jquery.js:7993 Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:nomod] Module 'application' 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.
my controller is controller.js as follows
angular.module('application') .controller( 'controller', [ '$scope', 'service', '$uibModal', '$uibModalStack','$rootScope', function($scope, service, $uibModal, $uibModalStack,$rootScope) {}]);
and my service is service.js as follows
angular.module('application').service('service',
[ '$resource', function($resource) {
var requstService = $resource('test', {}, {
});
return requstService;
} ]);
when i load the view page it running perfectly but when i click again on site link it showing above error.Please help.
Your controller should be,
angular.module('siteApplication',[]) .controller( 'siteController', [ '$scope', 'siteService', '$uibModal', '$uibModalStack','$rootScope', function($scope, siteService, $uibModal, $uibModalStack,$rootScope) {
your module is missing []
your controller should be like:
angular.module('siteApplication',[])
also did you not paste the ending part of the controller i.e } ]);
on purpose ?
Use [] in your controller to create module like this.
angular.module('moduleName', [])
and use this in your html page like ng-app="moduleName"
and add dependency js file related to $uibModal.

Failed to instantiate module firebase

Not sure what I'm doing wrong here. I'm requiring my modules via npm. Everything seems to be loading in correctly (angular etc.) except for Firebase. I'm getting this error:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' 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.
I'm requiring Firebase just like my other modules. This is what my code looks like:
(function() {
'use strict';
var angular = require('angular');
var angularRoute = require('angular-route');
var angularTouch = require('angular-touch');
var Firebase = require('firebase');
angular.module('outcomesApp', ['ngTouch', 'ngRoute', 'firebase'])
.controller('UnitController', ['$scope', '$http', 'FBURL', function($scope, $http, FBURL){
}])
.constant('FBURL', 'https://new-outcomes.firebaseio.com/')
})();
Any idea what I'm doing wrong? Any help is appreciated. Thanks in advance!
You need to include a reference to the AngularFire library. That is where the angular module is defined.

How to put a services on angularjs?

I'm trying to write a module on angular js for put my service (file: utils/productos.js) then load it as a dependency for my module ventas (ventas/ventas.js) but
I get the next error:
Error: [$injector:nomod] Module 'utils.producto' 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.
http://errors.angularjs.org/1.3.10/$injector/nomod?p0=utils.producto angular.js:63:11
Error: [$injector:modulerr] Failed to instantiate module webui due to:
[$injector:modulerr] Failed to instantiate module utils.producto due to:
[$injector:nomod] Module 'utils.producto' 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.
http://errors.angularjs.org/1.3.10/$injector/nomod?p0=utils.producto
minErr/<#http://localhost/cat-dog/web/app/js/angular.js:63:12
module/<#http://localhost/cat-dog/web/app/js/angular.js:1764:1
ensure#http://localhost/cat-dog/web/app/js/angular.js:1688:38
module#http://localhost/cat-dog/web/app/js/angular.js:1762:1
loadModules/<#http://localhost/cat-dog/web/app/js/angular.js:4094:22
forEach#http://localhost/cat-dog/web/app/js/angular.js:323:11
loadModules#http://localhost/cat-dog/web/app/js/angular.js:4078:5
loadModules/<#http://localhost/cat-dog/web/app/js/angular.js:4095:40
forEach#http://localhost/cat-dog/web/app/js/angular.js:323:11
lo
app.js
var app = angular.module('webui', ['ngRoute', 'utils.producto', 'ventas']);
main.html
<script type="text/javascript" src="ventas/ventas.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="utils/productos.js"></script>
ventas/ventas.js
angular.module('ventas', ['ngRoute', 'utils.producto'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/ventas', {
templateUrl: 'ventas/ventas.html',
controller: 'VentasCtrl'
});
}])
utils/producto.js
angular.module('utils.producto').factory("buscadorProductos", buscadorProductos).factory("autocompProductos", autocompProductos);
function buscadorProductos($http) {
..
Define service as module first like angular.module('utils.producto',[])
Code
angular.module('utils.producto',[]).factory("buscadorProductos", buscadorProductos).factory("autocompProductos", autocompProductos);
function buscadorProductos($http) {

cannot load module in angular js

I have simple problem with angularjs
Services.js
'use strict'
var restData = angular.module('ccapp.services', ['ngResource']);
restData.factory('Testcust', function ($resorce) {
return $resorce('http://localhost:8080/CallCenterRest/webresources/testcust',{},{
query:{method:'GET', isArray:true}
});
});
app.js
var app = angular.module('ccapp', [
'ngRoute',
'ccapp.services']);
app.config(function ($routeProvider) {
$routeProvider
.when('/viat',
{
controller: 'viatctrl',
templateUrl: 'pages/viat.html'
})
.otherwise({ redirectTo: 'index.html' });
});
problem is
Uncaught Error: [$injector:modulerr] Failed to instantiate module
ccapp due to: Error: [$injector:modulerr] Failed to instantiate module
ccapp.services due to: Error: [$injector:nomod] Module
'ccapp.services' 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.
somebody can help :)
Check the index.html file to ensure that Services.jsis included by a script tag like so <script src="whatever-your-path-is/Services.js"></script>.
If your project was set up such that a grunt or gulp task compiles all javascript files into one file (e.g., my-app.js) to be included in index.html by a script tag, then you need to make sure that this Service.js file is on the path to be processed by the grunt or gulp task.

Categories