I am Trying to follow the rules on https://github.com/johnpapa/angular-styleguide#style-y075 , and i am trying to inject the dependencies, and unfortunatly, it fails on GetDiscussionThreadListService
HTML :
<discussion-parent someParam></discussion-parent>
JS :
var xDiscussionsDirectives = angular.module('xxx.discussions.parent', ['ngResource']).directive('discussionParent', discussionParrentDirective);
function discussionParrentDirective() {
var directive = {
restrict: 'E',
scope: {
discussionType: '#docDiscussionType',
},
templateUrl: 'modules/discussions/views/ParentDiscussionTemplate.aspx',
replace: false,
controller: discussionParrentDirectiveController,
//controllerAs: 'vm',
bindToController: true
};
return directive;
}
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];
function discussionParrentDirectiveController($scope, $element, $attrs) {
GetDiscussionThreadListService.get({
//some params
}, function (data) {
}
}
ReferenceError: GetDiscussionThreadListService is not defined
(xxx.discussions.parrent.js:278)
To solve your problem you need to declare this module in your function arguments list like this :
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];
function discussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService) {
GetDiscussionThreadListService.get({
//some params
}, function (data) {
}
This way your variable GetDiscussionThreadListService will be define in your scope.
One alternative is to import is as first to avoid all those useless module (which are injected by the way).
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', 'GetDiscussionThreadListService', '$location', '$filter', '$interval', '$modal', '$timeout'];
function discussionParrentDirectiveController($scope, $route, $routeParams, GetDiscussionThreadListService) {
GetDiscussionThreadListService.get({
//some params
}, function (data) {
}
I also use this styleguide it is a great one, continue with it because totally think it worth it.
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService']
And
function discussionParrentDirectiveController($scope, $element, $attrs)
need to match
the $inject purpose is to handle issues like the minimization of javascript, so the module names need to match. In your function you need to have the same parameters.
function discussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService)
Related
I am trying to import a service to use it inside my controller, but inside console it is showing this error:
Uncaught SyntaxError: Unexpected token {
I am using Flask-Assets to minify javascript files.
This is my service and controller files contents:
app.service('metaCsrfToken', ['', function () {
this.get_token = function(){
var csrf_token = angular.element('meta[name=csrf_token]')
return csrf_token[0].content
}
}]);
import { metaCsrfToken } from '../services/owasp'
app.controller('call-center.controller',
['$scope', '$http', '$window', '$log', '$compile', '$timeout', '$interval', 'toastr', '$filter', 'metaCsrfToken',
function($scope, $http, $window, $log, $compile, $timeout, $interval, toastr, $filter, metaCsrfToken){
// .........
console.log(metaCsrfToken.get_token())
}]);
Full error path:
_app_scripts.js?93a3d221:100 Uncaught SyntaxError: Unexpected token {
100 import{metaCsrfToken}from'../services/owasp'
101 app.controller('call-center.controller',['$scope','$http','$window','$log','$compile','$timeout','$interval','toastr','$filter','metaCsrfToken',function($scope,$http,$window,$log,$compile,$timeout,$interval,toastr,$filter,metaCsrfToken){$scope.numberInput
102 console.log(metaCsrfToken.get_token())}]);
So finally i resolved the problem, just by creating a service and inject it into controller:
app.service('csrfToken', function csrfTokenFactory() {
this.get_token = function(){
var csrf_token = angular.element('meta[name=csrf_token]')
return csrf_token[0].content
}
});
app.controller('call-center.controller',
['$scope', '$http', '$window', '$log', '$compile', '$timeout', '$interval', 'toastr', '$filter', 'csrfToken',
function($scope, $http, $window, $log, $compile, $timeout, $interval, toastr, $filter, csrfToken){
// ......
console.log(csrfToken.get_token())
}]);
I don't know why import always gives that error!!!
I have easy service in my app.
var app = angular.module("appTest", []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log("service")
};
});
And I want to use it in my controller
var app = angular.module('appTest');
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
But I have mistake http://prntscr.com/mckff7
I did my service by any case. Result the same.
I add my service by this way http://prntscr.com/mckgrt
You're not 'injecting' the AuthService into your controller. You're receiving it as an object, but you need to declare it in the array of strings too for it to actually be injected.
Your controller code should look like this:
var app = angular.module('appTest', []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log('hello world');
};
});
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location', 'AuthService',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
app.service('situacao', function($log, $q, $http, $rootScope){
var situacao = this;
situacao.lista = {};
situacao.getAllSituacao = function(){
var defer = $q.defer();
console.log("php/getAll.php");
$http.get($rootScope.endPoint + "php/getAll.php")
.success(function(res) {
console.log(res);
situacao.lista = res;
defer.resolve(res);
}).error(function(err, status){
defer.reject(err);
});
return defer.promise;
};
return situacao;});
app.controller('listCtrl',['$scope', '$uibModal', '$log', '$http', function(situacao, $scope, $modal, $log, $http) {
$scope.init = function(){
$scope.getAll();
}
$scope.getAll = function(){
situacao.getAllSituacao().then(function(res){
//sucess
$scope.dispSituacao = situacao.lista;
}, function(err){
//error
})
};
$scope.init();
}]);
I'm trying to use the "service" but results in error:
situacao.getAllSituacao is not a function.
what is wrong?
You have to update your inject to pass it in as well since you're using the array notation:
Change
app.controller('listCtrl', ['$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http)
To
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {
In my situation, I named all injected services correctly, but, their order was not the same, and it gave me the same error. My code was something like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function ($scope, situacao, $modal, $log, $http) {}
Putting them in correct order solved the problem. Like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {}
Hope this helps someone.
I have stripped my app down to the bare bones but I keep getting this error when using $parse: TypeError: object is not a function
What is wrong? What am I missing?
Seems to work fine in this plunker: http://plnkr.co/edit/WrXv9hT5YA0xYcLLvyDb
Could parse be conflicting with some other module?
Weirder still - it actually does change the value of $scope.modal.on! Even though it appears to die before hand...
/* Controllers */
//var MyApp = angular.module('MyApp', ['ngSanitize', 'ui.bootstrap', 'ui.sortable']);
var MyApp = angular.module('MyApp', ['ngSanitize', 'ui.bootstrap']);
MyApp.controller('MyController', ['$scope', '$http', '$modal', '$parse', function($scope, $http, $parse, $modal, $log) {
$scope.modal = {
open : false,
tplfile : null,
toggle : function(){
this.open = !this.open;
if(this.open) angular.element('body').addClass('modal-open');
else angular.element('body').removeClass('modal-open');
}
};
var modal = $parse('modal.open');
modal.assign($scope, true);
}]);
You passed in your dependencies in the incorrect order. The dependencies to the function have to match exactly the order in the array.
MyApp.controller('MyController',
['$scope', '$http', '$modal', '$parse', function
($scope, $http, $parse, $modal, $log) {
If you swap $parse and $modal in your controller declaration, your error will go away. Also, you are missing $log, if you try to use that dependency you will get an error as well.
['$scope', '$http', '$modal', '$parse', function($scope, $http, $parse, $modal,
The $parse and $modal are interchanged.
Please correct the order and it will work :)
It should be
MyApp.controller('MyController', ['$scope', '$http', '$modal', '$parse', '$log', function($scope, $http, $modal, $parse, $log) {
I try to inject $timeout in the run function but I get that it is not a function when I try to call it. Why ?
var mainApp = angular.module('mainApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', ngCookies']);
mainApp.run(['$rootScope', '$location', '$timeout'
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
mainApp.run(['$rootScope', '$location', '$timeout'
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
should be:
mainApp.run(['$rootScope', '$location', '$route', 'authService', '$timeout',
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
see 'The array annotation' part here:
https://docs.angularjs.org/api/auto/service/$injector
When you annotate function with names of dependencies, the order of appearance should match.
...
mainApp.run(['$rootScope', '$location', '$route', '$timeout', 'authService',
function ($rootScope, $location, $route, $timeout, authService) {
...
}]);