I have two controllers in a template. I am passing data between them using a service. However when the model value is updated using a textbox, the text is refreshed (two-way) only on the first div that uses first controller.
How to get the second div data refreshed
Without using watch or ng-change
With using watch
Reference:
Using ng-change instead of $watch in Angular
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div class="container" style="padding-top: 20px;">
<div ng-controller="myController">
<input type="text" ng-model="valueA">
<p>From First: {{valueA}}</p>
</div>
</div>
<div class="container" style="padding-top: 20px;">
<div ng-controller="mySECONDController">
<p>From Second: {{valueB}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName)
{
this.name = newName;
};
this.getName = function ()
{
return this.name;
};
}
);
//defining controller
app.controller('myController', function ($scope, myService) {
myService.setName("Lijo");
$scope.valueA = myService.getName();
});
//defining controller
app.controller('mySECONDController', function ($scope, myService) {
$scope.valueB = myService.getName();
});
</script>
</body>
</html>
What you can do is set the value to the service in the first controller and get it using the service in the second one. So it will be always reffering to the value that is stored in the Service.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div class="container" style="padding-top: 20px;">
<div ng-controller="myController">
<input type="text" ng-model="valueA" ng-change="myService.setName(valueA)">
<p>From First: {{myService.getName()}}</p>
</div>
</div>
<div class="container" style="padding-top: 20px;">
<div ng-controller="mySECONDController">
<p>From Second: {{myService.getName()}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName)
{
this.name = newName;
};
this.getName = function ()
{
return this.name;
};
}
);
//defining controller
app.controller('myController', function ($scope, myService) {
myService.setName("Lijo");
$scope.myService= myService;
$scope.valueA = myService.getName();
});
//defining controller
app.controller('mySECONDController', function ($scope, myService) {
$scope.myService= myService;
});
</script>
</body>
</html>
Related
I am trying to share data in b/w controllers through angular service.
It worked perfectly fine if i let my app to bootrap automatically.
But when i manually bootstrap part of my HTML with same app, Data sharing between controllers do not work as expected.
Attached herewith is the fiddle and plnckr.
plnckr with auto bootstrap
plnckr with manual bootstrap
Following is the working code of data sharing b/w controllers through service/factory using auto bootstrap
// Code goes here
// Code goes here
// Code goes here
(function() {
'use strict';
var app = angular.module('myApp', []);
app.factory('MyFactory', function() {
var myFactory = {};
myFactory.myProperty = {prop: 'Hello'};
myFactory.setProperty = function(value) {
this.myProperty.prop = value;
};
return myFactory;
});
app.service('MyService', function() {
this.myProperty = {prop: 'Test'};
this.setProperty = function(value) {
this.myProperty.prop = value;
}
});
app.controller('DummyController', DummyController);
DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];
app.controller('Dummy1Controller', Dummy1Controller);
Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];
function DummyController($scope, MyFactory, MyService) {
$scope.property = MyFactory.myProperty;
$scope.property1 = MyService.myProperty;
}
function Dummy1Controller($scope, MyFactory, MyService) {
MyFactory.setProperty('World1144');
$scope.property = MyFactory.myProperty;
MyService.setProperty('World1144');
$scope.property1 = MyService.myProperty;
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body ng-app='myApp'>
<div class="container-fluid">
<br />
<div class="row">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Example [As a Service]</div>
<div class="panel-body">
<div ng-controller='DummyController' class='col-md-6'>
<form class="form-inline" role="form">
DummyController
<div>
Current Factory Value :
<input type='text' ng-model='property.prop'>
<br> Current Service Value :
<input type='text' ng-model='property1.prop'>
</div>
</form>
</div>
<hr>
<div ng-controller='Dummy1Controller' class='col-md-6'>
<form class="form-inline" role="form">
Dummy1Controller
<div>
Current Factory Value :
<input type='text' ng-model='property.prop'>
<br> Current Service Value :
<input type='text' ng-model='property1.prop'>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Following is the code of data sharing b/w controllers through service using manual bootstrap
// Code goes here
// Code goes here
// Code goes here
(function() {
'use strict';
var app = angular.module('myApp', []);
app.factory('MyFactory', function() {
var myFactory = {};
myFactory.myProperty = {prop: 'Hello'};
myFactory.setProperty = function(value) {
this.myProperty.prop = value;
};
return myFactory;
});
app.service('MyService', function() {
this.myProperty = {prop: 'Test'};
this.setProperty = function(value) {
this.myProperty.prop = value;
}
});
app.controller('DummyController', DummyController);
DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];
app.controller('Dummy1Controller', Dummy1Controller);
Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];
function DummyController($scope, MyFactory, MyService) {
$scope.property = MyFactory.myProperty;
$scope.property1 = MyService.myProperty;
}
function Dummy1Controller($scope, MyFactory, MyService) {
MyFactory.setProperty('World1144');
$scope.property = MyFactory.myProperty;
MyService.setProperty('World1144');
$scope.property1 = MyService.myProperty;
}
})();
setTimeout(function(){
angular.bootstrap(document.querySelector(".c1"), ["myApp"])//manual bootstrapping of PaginationComp
angular.bootstrap(document.querySelector(".c2"), ["myApp"])
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="script.js"></script>
</head>
<body >
<div class="container-fluid">
<br />
<div class="row">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Example [As a Service]</div>
<div class="panel-body">
<div ng-controller='DummyController' class='col-md-6 c1'>
<form class="form-inline" role="form">
DummyController
<div>
Current Factory Value :
<input type='text' ng-model='property.prop'>
<br> Current Service Value :
<input type='text' ng-model='property1.prop'>
</div>
</form>
</div>
<hr>
<div ng-controller='Dummy1Controller' class='col-md-6 c2'>
<form class="form-inline" role="form">
Dummy1Controller
<div>
Current Factory Value :
<input type='text' ng-model='property.prop'>
<br> Current Service Value :
<input type='text' ng-model='property1.prop'>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Check out AngularJS Bootstraping guidelines here
https://docs.angularjs.org/guide/bootstrap
When doing this:
setTimeout(function(){
angular.bootstrap(document.querySelector(".c1"), ["myApp"])//manual bootstrapping of PaginationComp
angular.bootstrap(document.querySelector(".c2"), ["myApp"])
}, 1000);
You have more than one AngularJS application instance on your page and that is why the data is not shared between your controllers, since this service instances are living in different apps.
All you have to do is just to bootstrap the app once using the element that contains your ngController directives, for example:
setTimeout(function(){
angular.bootstrap(document.querySelector(".panel-body"), ["myApp"])
}, 1000);
Working fiddle:
(function() {
'use strict';
var app = angular.module('myApp', []);
app.factory('MyFactory', function() {
var myFactory = {};
myFactory.myProperty = {prop: 'Hello'};
myFactory.setProperty = function(value) {
this.myProperty.prop = value;
};
return myFactory;
});
app.service('MyService', function() {
this.myProperty = {prop: 'Test'};
this.setProperty = function(value) {
this.myProperty.prop = value;
}
});
app.controller('DummyController', DummyController);
DummyController.$Inject = ['$scope', 'MyFactory', 'MyService'];
app.controller('Dummy1Controller', Dummy1Controller);
Dummy1Controller.$Inject = ['$scope', 'MyFactory', 'MyService'];
function DummyController($scope, MyFactory, MyService) {
$scope.property = MyFactory.myProperty;
$scope.property1 = MyService.myProperty;
}
function Dummy1Controller($scope, MyFactory, MyService) {
MyFactory.setProperty('World1144');
$scope.property = MyFactory.myProperty;
MyService.setProperty('World1144');
$scope.property1 = MyService.myProperty;
}
})();
setTimeout(function(){
angular.bootstrap(document.querySelector(".panel-body"), ["myApp"])
}, 1000);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body >
<div class="container-fluid">
<br />
<div class="row">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Example [As a Service]</div>
<div class="panel-body">
<div ng-controller='DummyController' class='col-md-6 c1'>
<form class="form-inline" role="form">
DummyController
<div>
Current Factory Value :
<input type='text' ng-model='property.prop'>
<br> Current Service Value :
<input type='text' ng-model='property1.prop'>
</div>
</form>
</div>
<hr>
<div ng-controller='Dummy1Controller' class='col-md-6 c2'>
<form class="form-inline" role="form">
Dummy1Controller
<div>
Current Factory Value :
<input type='text' ng-model='property.prop'>
<br> Current Service Value :
<input type='text' ng-model='property1.prop'>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have 2 controllers i want to call a function in one controller in another. I'm using this and I'm not using any $scope. How can i call a function from one controller to another.
var app = angular.module("myapp", []);
app.controller("myctl", function () {
var parent= this;
parent.SayHello = function () {
// code
}
})
app.controller("otherctl", function () {
var child = this;
// how to call sayHello without $scope
})
You cannot, even if you are using $scope.
You cannot inject one controller to another controller.
In order to share the data among the controllers, consider using factory/service.
DEMO
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
});
app.controller("TestCtrl2",
function($scope,names) {
$scope.getnames = function(){
$scope.names = names.get();
}
});
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl2">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
I get this error - Error: $controller:ctrlreg A controller with this name is not registered. All of my scripts are loaded, and I added them all in index.html.
All scripts are loaded
My controller:
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
My directive:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
My service:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.service("nsoftService", ["http", function(http) {
var service = this;
}]);
})();
My module:
(function() {
var weatherMod = angular.module("nsoftModule", []);
})();
My template:
<div class="container">
<div ng-controller="nsoftController">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</div>
My app.js:
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
And my index.html:
<!DOCTYPE html>
<html ng-app="nsoftApp">
<head>
<title>Nsoft App</title>
</head>
<body>
<nsoft-directive></nsoft-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="weatherModule.js"></script>
<script src="Service/weatherService.js"></script>
<script src="Controller/weatherController.js"></script>
<script src="Directive/weatherDirective.js"></script>
<script src="app.js"></script>
</body>
</html>
just remove the global variable because in you are using anonymous self invoking function variable is only limited to one anonymous function. use like his
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
(function() {
angular.module("nsoftModule").directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
//change http to $http
(function() {
angular.module("nsoftModule").service("nsoftService", ["$http", function($http) {
var service = this;
}]);
})();
(function() {
angular.module("nsoftModule", []);
})();
since controller assign from the directive no need to declare it in the html also
<div class="container">
<div >
<p>Name : <input type="text" ng-model="nsoftCtrl.name"></p>
<h1>Hello {{nsoftCtrl.name}}</h1>
</div>
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
I have a view where the user gives an input and display it in another view.
view 1:
<ion-content ng-controller="controller">
<input type="text" ng-model="name">
<button ng-click="save()">Save</button>
Controller:
$scope.save = function () {
$scope.displayName = $scope.name;
$state.go('app.viewTwo');
}
View 2:
<ion-content ng-controller="controller">
{{displayName}}
</ion-content>
Its known, that whenever a view is loaded the controller is initialized fresh every time. So how to display the value from the first view, in another view.
You need to use a service or factory to use the variable across the controllers.
DEMO:
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
$scope.getnames = function(){
$scope.names = names.get();
}
}
);
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
You can also use $rootScope , but it is not a recommended way.
I am using factory method in AngularJS to show the combination of First Name and Last Name (first two controllers) as Full Name(in third Controller), but i am not getting the desired output. here is my code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName">
<br>FirstName is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="Data.LastName">
<br>LastName is : <strong>{{Data.LastName}}</strong>
</div>
<div ng-controller="ThirdCtrl">
FullName is : {{Data.FirstName + " " + Data.LastName}}
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { FirstName: '',LastName:'' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('ThirdCrl', function ($scope, Data) {
$scope.Data = Data;
});
</script>
</body>
</html>
Can you please Help?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName">
<br>FirstName is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="Data.LastName">
<br>LastName is : <strong>{{Data.LastName}}</strong>
</div>
<div ng-controller="ThirdCtrl">
FullName is : {{Data.FirstName + " " + Data.LastName}}
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { FirstName: '',LastName:'' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('ThirdCtrl', function ($scope, Data) {
$scope.Data = Data;
});
</script>
</body>
</html>
It seems you have spelled wrongly the third controller name.