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>
Related
This is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.getName = function () {
$scope.name = fname;
$scope.lastName = lastName;
};
})
</script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name"/> <br>
<input type="text" ng-model="lastName" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{name}}<br>
Last Name {{lastName}}
</div>
</body>
</html>
values are coming while typing into textbox but i want values only after clicking the button.Please help me.
I tried in both ways simple as well as by using service or factory method but no success
You must separate the ng-models of the input texts and destination field. They are updating real-time because of having the same models.
I have created the correct version for you:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.getName = function () {
$scope.nameToSet = $scope.name;
$scope.lastNameToSet = $scope.lastName;
};
})
</script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name"/> <br>
<input type="text" ng-model="lastName" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{nameToSet}}<br>
Last Name {{lastNameToSet}}
</div>
</body>
</html>
UPDATE: Here is another version with using a factory:
var myApp = angular.module('myApp', []);
myApp.factory('container', function() {
var model = {
name: '',
lastName: ''
};
return {
model: model,
setName: function(nameToSet) {
model.name = nameToSet;
},
setLastName: function(lastNameToSet) {
model.lastName = lastNameToSet;
}
};
});
myApp.controller('myController', function ($scope, container) {
$scope.$watch('name', function(newvalue,oldvalue) {
container.setName(newvalue);
});
$scope.$watch('lastName', function(newvalue,oldvalue) {
container.setLastName(newvalue);
});
$scope.onNameType = function(value) {
container.setName(value);
};
$scope.onLastNameType = function(value) {
container.setLastName(value);
};
$scope.getName = function () {
debugger;
$scope.nameToSet = container.model.name;
$scope.lastNameToSet = container.model.lastName;
};
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<div >
<input type="text" ng-model="name" ng-change="onNameType(name)"/> <br>
<input type="text" ng-model="lastName" ng-change="onLastNameType(lastName)" />
</div>
<div ng-controller="myController">
<input type="button" value="click" ng-click="getName()" />
<br>
Hello FirstName {{nameToSet}}<br>
Last Name {{lastNameToSet}}
</div>
</body>
</html>
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 developing an Web Application using Angular JS. I am a beginner to AngularJS. In my app, I need to dynamically add and remove elements. I use directive for it. Adding and removing elements is working fine. But I am having a problem with retrieving each model value of added inputs.
My scenario is below.
This is my app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angularjs popup</title>
<link href="http://localhost:8888/angular/bootstrap.css" rel="stylesheet">
<script src="http://localhost:8888/angular/angular-js.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller='myCtrl'>
<div>
<button class="btn btn-success" ng-click="addRow()">Add row</button>
<hr />
<div id="rowsContainer">
</div>
<button class="btn btn-primary" ng-click="submitForm()">Submit</button>
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($rootScope,$scope,$compile){
$rootScope.getContacts = function()
{
var list = [{contactId: 1,contactType: 'Mobile'} , {contactId: 2,contactType: 'Office'} , {contactId: 3,contactType: 'Home'}];
return list;
}
$scope.contactType = [];
$scope.contactValue = [];
$scope.submitForm = function(){
alert($scope.contactType)
//I want to retrieve ContactValue and ContactType here. All values by looping throgh
};
$scope.addRow = function() {
var divElement = angular.element(document.querySelector('#rowsContainer'));
var appendHtml = $compile('<dynamic-Row contact-type="contactType"></dynamic-Row>')($scope);
divElement.append(appendHtml);
}
});
app.directive('dynamicRow', function() {
return {
restrict: "E",
scope: {
contactType: "=contactType",
contactValue : "=contactValue"
},
templateUrl:'http://localhost:8888/angular/dynamic/row.html',
controller: function($rootScope, $scope, $element) {
$scope.contacts = $rootScope.getContacts();
$s
cope.contactType.push($scope.contact_type)
$scope.contactValue.push($scope.contact_value)
$scope.deleteRow = function(e){
$element.remove();
$scope.$destroy();
}
}
}
});
</script>
</html>
I commented what I want to do in the above code.
this is the row.html
<div class="row">
<div class="col-md-5">
<select name="ContactType" class="form-control" ng-model="contact_type" >
<option ng-repeat="contact in contacts" value="{{contact.contactId}}"> {{contact.contactType}} </option>
</select>
</div>
<div class="col-md-5">
<input ng-model="contact_value" class="form-control">
</div>
<div class="col-md-2">
<button ng-click="deleteRow($event)" class="btn btn-danger">X</button>
</div>
</div>
How can I get the each value of all dynamically added input controls in submitForm function?
Here is the answer based on the requirement,
You Isolated the scope using scope: {}, so you cannot access those model values.
Try to bind the scope,
scope: {
contact_type: "=contact_type"
contact_value: "=contact_value"
}
Controller and Directive,
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($rootScope,$scope,$compile){
$rootScope.getContacts = function()
{
var list = [{contactId: 1,contactType: 'Mobile'} , {contactId: 2,contactType: 'Office'} , {contactId: 3,contactType: 'Home'}];
return list;
}
$scope.contactType = [];
$scope.contactValue = [];
$scope.submitForm = function(){
alert($scope.contactType)
//I want to retrieve ContactValue and ContactType here. All values by looping throgh
};
$scope.addRow = function() {
var divElement = angular.element(document.querySelector('#rowsContainer'));
var appendHtml = $compile('<dynamic-Row contact-type="contactType" contact-value="contactValue"></dynamic-Row>')($scope);
divElement.append(appendHtml);
}
});
app.directive('dynamicRow', function() {
return {
restrict: "E",
scope: {
contactType: "=contactType",
contactValue : "=contactValue"
},
templateUrl:'row.html',
controller: function($rootScope, $scope, $element) {
console.log($scope.contactType)
$scope.contacts = $rootScope.getContacts();
// $s
$scope.update = function()
{
$scope.contactType.push($scope.contact_selected)
}
$scope.contactValue.push($scope.contact_value_selected)
$scope.deleteRow = function(e){
$element.remove();
$scope.$destroy();
}
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angularjs popup</title>
<!-- <link href="http://localhost:8888/angular/bootstrap.css" rel="stylesheet"> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller='myCtrl'>
<div>
<button class="btn btn-success" ng-click="addRow()">Add row</button>
<hr />
<div id="rowsContainer">
</div>
<button class="btn btn-primary" ng-click="submitForm()">Submit</button>
</div>
</div>
</body>
</html>
Here is your row.html,
<div class="row">
<div class="col-md-5">
<select name="ContactType" class="form-control" ng-model="contact_selected" ng-change="update()">
<option ng-repeat="contact in contacts" value="{{contact.contactId}}"> {{contact.contactType}} </option>
</select>
</div>
<div class="col-md-5">
<input ng-model="contact_value_selected" class="form-control">
</div>
<div class="col-md-2">
<button ng-click="deleteRow($event)" class="btn btn-danger">X</button>
</div>
</div>
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>
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.