I'm trying to use the sticky headers directive from: http://ngmodules.org/modules/sticky-headers
but it doesn't seem to work with the combination of using ng-view.
When using the fsm directive as required, I'm getting an empty view:
angular.module('dashboard', ['fsm']).controller('installerController',
[ '$scope', '$filter','$http','$log', '$location','$compile',
'$routeParams',
function($scope, $filter, $http, $log, $location, $compile, $routeParams)
When not including the fsm directive, everything works fine:
angular.module('dashboard').controller('installerController',
[ '$scope', '$filter','$http','$log', '$location','$compile',
'$routeParams',
function($scope, $filter, $http, $log, $location, $compile, $routeParams)
Your help is much appreciated.
Thanks.
The difference between the method angular.module(string) and angular.module(string, array[]) is that the first one loads a specific module and the second one creates a new angular module
Make sure that you only create your module once
Related
I am trying to use uibModal (from angular-ui-bootstrap v0.12.1) in an angularJS application (v.148). I am aware of the current angular versions. When I am trying to use the modal using example code below, I am seeing the error:
TypeError: $uibModal.open is not a function
I have added the following to the application:
angular.module('someApp', ['ui.bootstrap']);
In the controller file, I am using the following:
angular.module('someAppController')
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService',
function($scope, $http, $locaton, $uibModal, someService) {
On an event:
$uibModal.open({
templateUrl: 'some.html',
windowClass: 'modal-danger'
});
I have tried replacing $uibModal to $modal (both in the module call and where I am trying to create the modal). However, I get the same error complaining about $uibModal.open or $modal.open is not a fucntion. Any thoughts on what I am doing wrong? I cannot find any issues with the versions or other dependencies causing issues.
You have some typos in your code and are not properly injecting the $uibModal provider
change
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService'
to
.controller('someController', ['$scope', '$http', '$location', '$uibModal', 'someService'
also change
templateUrk: 'some.html',
to
templateUrl: 'some.html',
I am using this library for angularjs toaster:
https://github.com/jirikavi/AngularJS-Toaster
and added the following references:
<link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css" type="text/css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-animate.min.js"></script>
<script src="/bower_components/AngularJS-Toaster/toaster.min.js"></script>
I also added angular-animate as it seems using it, and added dependency injection on app module as:
.module('venture', [
'oc.lazyLoad',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'satellizer',
'angularPayments',
'angularFileUpload',
'ngBootbox',
'ui.tinymce',
'ngSanitize',
'pikaday',
'ngAnimate',
'toaster',
])
My controller parametes looks as:
.controller("ClassController", ['$scope', '$location', '$rootScope', '$timeout', '$state', 'ClassService', 'ERROR_MSG', 'SUCCESS_MSG', 'FileUploader', 'REST_END_POINT', '$stateParams', 'UserService', 'toaster',
function ($scope, $location, $rootScope, $timeout, $state, ClassService, ERROR_MSG, SUCCESS_MSG, FileUploader, REST_END_POINT, $stateParams, UserService, toaster) {
and somewhere on the code I am using:
toaster.pop('success', "title", "text");
I know it comes here the execution but the toaster never shows up, nor the error comes...
Just so you know I am using angualarjs 1.2.16
I donw know what I am missing out here?
You didn't mention that you added
<toaster-container></toaster-container>
to index.html
Maybe that's it?
From the documentation of the toaster plugin your using:
AngularJS-Toaster requires AngularJS v1.2.6 or higher and specifically
targets AngularJS, not Angular 2, although it could be used via
ngUpgrade.
I am trying to get URL parameters using $routeParams:
var myApp = angular.module('myApp', [
'ngRoute',
'appControllers',
'appFilters',
'appServices'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/admin/organisations/:organisation_id', {
controller: 'UpdateOrganisationCtrl'
});
}]);
and in my Controller:
appControllers.controller('UpdateOrganisationCtrl', ['$rootScope', '$scope', '$http', '$window', '$routeParams',
function($rootScope, $scope, $http, $window, $routeParams) {
console.log($routeParams.organisation_id);
}]);
However I am printing undefined as $routeParams is {} Any thoughts?
The url you tried to access should be
localhost:3000/#/admin/organisations/56cde4bf911747ea200d5a63
ngRoute will make your application a Single Page Application, where the relevant part of the url for the router will be after # (beautifully called the hashbang).
Look at the example:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
However, the url you give could work if you use HTML5Mode for $location service of angular.
See those links for more information:
AngularJS routing without the hash '#'
Using $location
I am building an app with MEAN.js and I am trying to add https://github.com/oitozero/ngSweetAlert
The first thing I did was to edit the config/env/all.js file to include the javascript files for SweetAlert
I then edited the public/dist/application.js file to add the "oitozero.ngSweetAlert" module as follows:
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'oitozero.ngSweetAlert'];
Now in my controller I try to add the module, and once I do this I get the Unknown Provider error:
angular.module('stock').controller('myController', ['$rootScope', '$scope', '$stateParams', '$location', '$http', '$modal', 'Authentication', 'Stock', 'Users', 'SweetAlert',
function($rootScope, $scope, $stateParams, $location, $http, $modal, Authentication, Stock, Users, SweetAlert) {
I would really appreciate any suggestions as to what I am doing wrong. TIA!
I am trying to share variable among the controller so I am using angular's Factory. I have following code for the same:
var app = angular.module('chartApp', ['ngRoute']);
app.factory('UserVerified', function() {
return {bool: false};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller: 'PredictionController'
})
});
app.controller('PredictionController', ['$scope', '$http', '$interval', function($scope, $http, $interval){
$scope.hasPermission = UserVerified;
}]);
and on HTML i am just using hasPermission.bool to set visibility of a <div>.
But the issue is angularjs is unable to identify UserVerified defined in "app.factory".
I am getting following error:
ReferenceError: UserVerified is not defined
I referred following : Share data between AngularJS controllers
Only difference I can find is, I am using dependencies which is not used in the example in the above link.
you need to inject your custom service in your controller
app.controller('PredictionController', ['$scope', '$http', '$interval','UserVerified',function($scope,$http,$interval,UserVerified) {
$scope. hasPermission = UserVerified.bool; //true
}]);
inorder to avoid breaking of your application after minification of code you can also use $inject in angularjs to inject dependecies.
app.controller("PredictionController",PredictionController);
PredictionController.$inject = [$scope','$http','$interval','UserVerified']//dependencies
function PredictionController($scope,http,interval,UserVerified){
$scope. hasPermission = UserVerified.bool; //true
}
Note: Services names will be renamed after the minification and can indulge in breaking your application
You need to do this,
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerified.bool;
}]);
You need to pass the service as a parameter to controller
You need to inject UserVerified into your controller.
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerifiedvalue.;
}]);
Plus, in UserVerified you are returning a key which is a reserved word. It will work but will create unnecessary confusion.
app.factory('UserVerified', function() {
return {value: false};
});
Here is a plunker as a demo.