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
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();
}]);
I have this js code
var app = angular.module('app', []);
app.service('testService', function(){
this.sayHello= function(text){
return "Service says \"Hello " + text + "\"";
};
this.sayGoodbye = function(text){
return "Service says \"Goodbye " + text + "\"";
};
});
app.controller('AboutCtrl', ['testService', function ($scope, $location, $http) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
and in my html I have this
....
...
hi {{fromService}}
....
...
There are no errors in console and the page is just blank.
Please take a look at AngularJs Docs "Using Dependency Injection".
The correct way:
app.controller('AboutCtrl', ['$scope', '$location', '$http',
'testService', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
You can inject your service to controller by these ways.
Inline Array Annotation
app.controller('MyController', ['$scope', 'testService', function($scope, testService) {
// ...Code here
}]);
$inject Property Annotation
var MyController = function($scope, testService) {
// ...
}
MyController.$inject = ['$scope', 'testService'];
app.controller('MyController', MyController);
Implicit Annotation
app.controller('MyController', function($scope, testService) {
// ...
});
if you want to know which one is preferred then read this Dependency Injection
You're not injecting your service properly.
app.controller('AboutCtrl', ['$scope', '$location', '$http',
'testService', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
}]);
Also in your HTML you should add ng-app="app" and ng-controller to especify your controller.
<!DOCTYPE html>
<html ng-app="app">
<head></head>
<body ng-controller="AboutCtrl">
<p>Hi {{fromService}}</p>
<!-- Also place here your JS files.-->>
</body>
</html>
Supper easy, Actually you are injecting service wrong place check this:
app.controller('aboutCtrl', function ($scope, $location, $http, testService) {
$scope.fromService = testService.sayHello("World");
$scope.toService = testService.sayGoodbye("World");
});
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 already have a code with 2 separate controllers .
Each controller's scope/view has an input text and a span.
All fine.
But Looking at the line with yellow color label(empty at the moment) - which is found within the second controller , I want the value to be the same value from as in first controller .
so I'm expecting the line to be (and changed automatically) :
Value from the FirstController is :First Cntrl
I already know that I need a serivce :
so here is my code :
angular.module('app', [])
.controller("FirstCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
myservice.messageFromCntrl1= this.message;
this.message = "First Cntrl";
}]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
this.message = "Second Cntrl";
this.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
this.messageFromCntrl1 = "???";
});
In the first controller I do set
myservice.messageFromCntrl1= this.message;
And in the second controller I do read :
this.messageFromCntrl1 = myservice.messageFromCntrl1;
And in the HTML :
Value from the FirstController is :<span style='color:red;'>{{myservice.messageFromCntrl1}}
But it doesn't work. What am I missing?
JSBIN
I modified your JSBIN, check it here. I believe it behaves now as you want it to.
angular.module('app', [])
.controller("FirstCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
this.message = myservice.messageFromCntrl1;
this.message.data = "First Cntrl";
}]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice', function($rootScope, $scope, myservice)
{
this.message = "Second Cntrl";
this.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
this.messageFromCntrl1 = {data:""};
});
And in your view
<div ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.message.data">
<h1>{{first.message.data}}</h1>
</div>
<div ng-controller="SecondCtrl as second">
<input type="text" ng-model="second.message">
<h1>{{second.message}} </h1>
Value from the FirstController is:
<span style='color:red;'>{{second.messageFromCntrl1.data}}</span>
</div>
First of all, if you want to keep this value updated between controllers you need to use objects and not simple variables. With objects you operate on references and updates are shared between all references of object.
Second, you tried to access service directly in view. You need to bind service reference to controller's scope.
I've made an edit to your jsbin, tell me if that's what you need
https://jsbin.com/mapuwojocu/1/edit?html,js,output
angular.module('app', [])
.controller("FirstCtrl", ['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
this.message = "First Cntrl";
this.myservice = myservice;
}
]).controller("SecondCtrl", ['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
this.message = "Second Cntrl";
this.myservice = myservice;
}
])
.service('myservice', function () {
return {
message: 'Cntrl'
};
});
You can't access service through the view. In addition change all your this to $scope in your controller.
Look at this example:
angular.module('app1', [])
.controller("FirstCtrl", ['$scope', 'myservice', function($scope, myservice)
{
$scope.message = "First Cntrl from code";
myservice.messageFromCntrl1= $scope.message;
}])
.controller("SecondCtrl", ['$scope', 'myservice', function($scope, myservice)
{
$scope.message = "Second Cntrl Code";
$scope.messageFromCntrl1 = myservice.messageFromCntrl1;
}])
.service('myservice', function()
{
this.messageFromCntrl1 = "???";
});
I have the following:
<div data-ng-controller="Controller1">
<div class="button"
data-ng-click="action2()">
</div>
</div>
<div data-ng-controller="Controller2">
</div>
angular.module('test')
.controller('QuestionsStatusController1',
['$rootScope', '$scope',
function ($rootScope, $scope) {
}]);
angular.module('test')
.controller('QuestionsStatusController2',
['$rootScope', '$scope',
function ($rootScope, $scope) {
// I need some way to receive the action2()
}]);
Is there a way I can make a click in the HTML of Controller1 cause a method to fire in Controller2. Note that I do not have a parent controller to either of these controllers. That's due to the fact I am using ui-router.
angular.module('test')
.controller('QuestionsStatusController1',
['$rootScope', '$scope', '$resource', '$state',
function ($rootScope, $scope, $resource, $state) {
$scope.action2 = function() {
$rootScope.$broadcast('action2#QuestionStatusController1');
}
}]);
angular.module('test')
.controller('QuestionsStatusController2',
['$rootScope', '$scope', '$resource', '$state',
function ($rootScope, $scope, $resource, $state) {
$rootScope.$on('action2#QuestionStatusController1', function {
//write your listener here
})
}]);