I have an angular app with the name DemoProject.
I have an app.run controller and one child controller
JS
var app = angular.module("DemoProject", ['ngRoute', 'ngAnimate', 'ngMessages', 'ngMaterial']);
app.run(function ($rootScope, $route, $location, $mdDialog) {
$rootScope.validate = true;
$rootScope.$broadcast('eventName', { myName: 'Bala' });
});
app.controller('ChildController', function ($scope, $location, $rootScope, $document, $window) {
$scope.myName = '';
});
I can't update the child controller scope using broadcast.
app.controller('ChildController', function ($scope, $location, $rootScope, $document, $window) {
$scope.myName = '';
$rootScope.$on('eventName', function(event, args){
console.log(args);
$scope.myName = args.myName;
});
});
Related
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.
The issue is that I can't seem to send information from Controller 1 to Controller 2... I have my service that sets/gets data but it isn't working. The actual error that I'm getting is that Controller 1's dataService.getData is not a function... when it works elsewhere.
Service 1 (in its own file)
app.service('dataService', function() {
var data, queried;
return {
setData: function(queryData) {
this.data = queryData;
this.queried = false;
},
getData: function() {
this.queried = true;
return this.data;
}
};
});
Controller 1 (sending information)
app.controller('MyCtrl', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller 2 (getting information)
app.controller('MyCtrl2', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
You didn't injected service dataService inside your MyCtrl & MyCtrl2, ensure dependency should be injected before using it.
Controller
app.controller('MyCtrl', ['$scope', '$location', '$state','dataService', //<-added dependency here
function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller2
app.controller('MyCtrl2', ['$scope', '$location', '$state','dataService',//<-added dependency here
function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
I want to get $scope variable value from "inherited" controller. It works for non-scope var but for scope var prints undefined.
appControllers.controller('parentCtrl', ['$scope', '$rootScope', '$http', '$location', '$log',
function ($scope, $rootScope, $http, $location, $log) {
$scope.someVariable = "Scope hello world.";
$scope.getLocalVariable = function (){
return "hello world";
}
$scope.getScopeVariable = function (){
return $scope.someVariable;
}
}]);
appControllers.controller('childCtrl', ['$scope', '$rootScope', '$http', '$location', '$log',
function ($scope, $rootScope, $http, $location, $log) {
$log.debug($scope.getLocalVariable()); // this WORKS
$log.debug($scope.getScopeVariable()); // this DOES NOT WORKS - prints undefined
}]);
part of .html file
<div ng-controller="parentCtrl">
<div ng-controller="childCtrl">
</div>
</div>
Do you have any idea? I also tried
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl ', function($scope) {
// I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $controller) {
var ctrl = $controller('ParentCtrl', {$scope: $scope});
ctrl.methodCall() // DOES NOT WORK
});
But it did not helped. Thanks
I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/