JavaScript angular controller get value from scope from another controller - javascript

I have school task.
We have a HTML code like this:
<html ng-app="myTest">
<head><script type="text/javascript" src="../myScript.js"></script>
</head>
<body id="tst" class="textpage" ng-controller="TestController as testcon">
<form class="" id="frm" ng-submit="doStuff()">
<div class="form-group">
{{testinfo}}
</div>
<div class="form-group">
<button type="submit" id="sbtn" name="sbtn">testSubmit</button>
</div>
</form>
</body>
</html>
Content of javascript with name myScript.js is this:
var tester = angular.module('myTest', ['ui.mask']);
tester.controller('TestController', ['$scope', '$http', '$location', '$window', function ($scope, $http, $location, $window) {
$scope.doStuff = function () {
{
$scope.testinfo = 'unknown value';
};
};
}
]);
I have option to add new javascript.
But I am not possible to get value from $scope.testninfo.
I cannot edit existing JavaScript and cannot edit HTML file. I can just add new javascript.
Is there option how to get value from $scope.testinfo in another javascript?
Thanks.

You can use broadcast
From controller 1 we broadcast an event
$scope.$broadcast('myEvent',anyData);
controller 2 will receive our event
$scope.$on('myEvent', function(event,anyData) {
//code for controller 2
});
here anyData represent your object to be passed

Use ng-model.
<div class="form-group">
<input type="text" ng-model="testinfo">
</div>

I dont think it is possible without appending the existing javascript/html. Because the $scope of the TestController cannot be accessed from another controller (file).
If you COULD append the HTML you could use the $rootscope, in that way the value, which is set by the TestController is accessible from another controller. Or you can add a Global app value. I created a fiddle which show the two options: https://jsfiddle.net/Appiez/wnyb9pxc/2/
var tester = angular.module('myTest', []);
tester.value('globalVar', { value: '' });
tester.controller('TestController', ['$rootScope', '$scope', '$http', '$location', '$window', 'globalVar', function ($rootScope, $scope, $http, $location, $window, globalVar) {
$scope.doStuff = function () {
{
$rootScope.testinfo = 'this is the new value';
globalVar.value = 'a global value';
};
};
}
]);
tester.controller('TestController2', ['$rootScope', '$scope', 'globalVar', function ($rootScope, $scope, globalVar) {
$scope.doStuff2 = function () {
{
alert($rootScope.testinfo);
alert(globalVar.value);
};
};
}
]);

This is what services are for in angular. They ferry data across controllers. You can use NG's $broadcast to publish events that contain data, but Providers, Services, and Factories are built to solve this.
angular.module('krs', [])
.controller('OneCtrl', function($scope, data){
$scope.theData = data.getData();
})
.controller('TwoCtrl', function($scope, data){
$scope.theData = data.getData();
})
.service('data', function(){
return {
getData: function(){
return ["Foo", "Bar"];
}
}
});
Here's a fiddle to help get you into the swing of things. Good luck in school!

Related

Strange behavior using multiple transclude component in Angularjs 1.6.1

I've a strange behavior using multiple transclude component in Angularjs:
changes in first slot model no visible in controller.
<div ng-app="myApp" ng-controller="testController">
<script type="text/ng-template" id="component-template.html">
<div style="color:red;" ng-transclude="heading">
</div>
<div style="color:blue;" ng-transclude="body">
</div>
</script>
Example1
<input ng-model="example1Model"/>
<test-component>
<panel-heading>
Example2
<input ng-model="example2Model"/>
</panel-heading>
<panel-body>
Example1Result:{{example1Model}}<br/>
Example2Result:{{example2Model}}
</panel-body>
</test-component>
</div>
<script>
angular.module("myApp", [])
.controller("testController", function ($scope, $location) {
})
.component("testComponent", {
templateUrl: "component-template.html",
transclude: {
heading: "panelHeading",
body: "panelBody"
},
controller: function ($scope, $element, $attrs) {
this.$doCheck = function () {
//do anything
}
}
});
</script>
Now if you try to test it in this JSfiddle:https://jsfiddle.net/Lpveophe/1/
Why binding model example2Model did not working?
However example1Model binding model working correctly.
You need to use . in ng-model to make it work. For better understand of scope, please go through this article: https://github.com/angular/angular.js/wiki/Understanding-Scopes
To make it work, replace example2Model with o.example2Model everywhere and change your controller to:
.controller("testController", function ($scope, $location) {
$scope.o = {};
$scope.o.example2Model = '';
})

Angular UI Modal data passed is null

I'm trying to get an Angular Bootstrap UI Modal (0.14) working. I can get the modal to pop up (great) but the data object I'm passing is null (it isn't null when i set it). I've looked at all sorts of plukners, which I see how they work, mine just doesn;t seem to work.
Below, I've rigged it to pass some made up data, in
(function () {
'use strict';
angular.module('MPAapp')
.controller('workCentreCtrl',
['$scope', '$rootScope', 'toastrFactory', 'workCentreResource', '$uibModal', '$log',
workCentreCtrl])
function workCentreCtrl($scope, $rootScope, toastrFactory, workCentreResource, $uibModal, $log) {
var scope = this;
var slot = [{'slot1':5}, {'slotname':'dynamo'},{'OriginalSlot':5}]
var max = 5
// Click event from the view
$scope.EditWorkOrder = function () {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/app/WorkOrder/Views/EditWorkOrder.html',
controller: 'EditWorkOrderCtrl',
size: 'lg',
resolve: {
data: function () {
return{
Slot: slot,
Max: max
}
}
}
});
modalInstance.result.then(function () {
$log.info('do some UI update here');
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
}());
/* END PARENT CONTROLLER */
/* --------------------------------*/
/* MODAL INSANCE CONTROLLER BEGIN*/
(function () {
'use strict';
angular.module('MPAapp')
.controller('EditWorkOrderCtrl', ['$scope', '$timeout', 'toastrFactory',
EditWorkOrderCtrl]);
EditWorkOrderCtrl.$inject = ['$uibModalInstance', 'data']
function EditWorkOrderCtrl($scope, $timeout, toastrFactory, $uibModalInstance, data) {
var scope = this;
$scope.ok = function () {
$uibModalInstance.close(scope.Slot);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
// THIS IS WHEN DATA IS UNDEFINED.
scope.Slot = data.Slot;
scope.SlotNumber = data.Slot.OriginalSlot;
}
}());
And the HTML in the modal instance
<div ng-controller="EditWorkOrderCtrl as vm">
<div class="row">
<div class="col-md-12">
<h2>Edit Work Order {{vm.Slot.WorkOrderNumber}}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12"><span class="main-text bold">Product:</span> {{vm.Slot.ProductCode}} - {{vm.Slot.ProductDescription}}</div>
</div>
<div class="row">
<div class="col-md-6">
<span class="main-text bold">Size:</span> {{vm.Slot.QuantityRequired}}
<span class="main-text bold">Time (mins):</span> {{vm.Slot.StandardRunTime}}
<span class="main-text bold">Current Date:</span>{{vm.Slot.OriginalOrderDate | date:'dd MMM yyyy'}}
</div>
<div class="col-md-6"></div>
</div>
</div>
Any help very much appreciated. I'm still quite new to Angular, it's proving a tough nut in some areas, but I love it!
Of course data is not going to be available like this (but it's not null, it's undefined). Your dependency injection is messed up. Note, that what you are describing in $inject array, must correspond to formal parameters passed to controller function.
In your case with this configuration:
EditWorkOrderCtrl.$inject = ['$uibModalInstance', 'data']
function EditWorkOrderCtrl($scope, $timeout, toastrFactory, $uibModalInstance, data) {}
you tell Angular to inject $uibModalInstance as $scope, and data as $timeout. Clearly not what you want.
Correct injection should look like
EditWorkOrderCtrl.$inject = ['$scope', '$timeout', 'toastrFactory', '$uibModalInstance', 'data'];
function EditWorkOrderCtrl($scope, $timeout, toastrFactory, $uibModalInstance, data) {}
Alternatively you can use array notation as controller definition:
.controller('EditWorkOrderCtrl', ['$scope', '$timeout', 'toastrFactory', 'workCentreResource', 'blockedDatesResource', 'data', EditWorkOrderCtrl]);
but in this case make sure you don't use EditWorkOrderCtrl.$inject = ['$uibModalInstance']. Remove it because it has higher priority and as I explained above it's messed up.
Also take a look at this answer, where I provided detail explanation about different injection methods.

Passing Parameter to Angular Factory from controller

I couldn't pass the parameter from angular controller to factory. Can any one help me on this? It works without passing parameter but when I pass it it's not.
var app = angular.module('employee', ['ui.grid', 'ui.grid.saveState', 'ui.grid.selection', 'ui.grid.cellNav', 'ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.pinning', 'ui.bootstrap', 'ui.grid.autoResize','ui.grid.pagination']);
app.controller('EmpCtrl', ['$scope', '$http', '$interval', '$modal', '$log', 'gridService', function ($scope, $http, $interval, $modal, $log, gridService) {
$scope.LoadNextPage = gridService.LoadNextPage("5");
}]);
var gridService = function ($http, $rootScope) {
return {
LoadNextPage: function (hh) {
alert(hh);
},
gridOptions:gridOptions
};
};
app.factory('gridService', ['$http', '$rootScope', gridService]);
And this is how I use it in the view
<span id="pcNext"
class="glyphicon glyphicon-step-forward"
ng-click="LoadNextPage()">
</span>
The problem is in your controller:
$scope.LoadNextPage = gridService.LoadNextPage("5");
This means that your LoadNextPage is not a function but rather a result of the call to a function in your service. Which btw doesn't return anything but rather just displays an alert. But in your view, you're using LoadNextPage as a function call...
Change it to this so your controller's LoadNextPage will be a function that you can call from the view.
$scope.LoadNextPage = gridService.LoadNextPage;
and in your view:
<span id="pcNext"
class="glyphicon glyphicon-step-forward"
ng-click="LoadNextPage(5)">
</span>
This should work.
Note: I suspect that your gridOptions are defined somewhere outside of scope of your code that you provided in the question so that it doesn't throw and error because of the missing (likely) object. So I considered this a typo in your code and not the actual problem.
Don't want params in your view?
No problem. You can either create a wrapper function or bind it to specific parameters in your code:
// wrap
$scope.LoadNextPage = function() {
return gridService.LoadNextPage("5");
};
// bind
$scope.LoadNextPage = gridService.LoadNextPage.bind(this, 5);
Or bake the number in your service...
Issue here is gridOptions:gridOptions is not defined which throws error.
Remove ,gridOptions:gridOptions from factory.
Check snippet for working code and compare with your code.
var app = angular.module('employee', []);
app.controller('EmpCtrl', ['$scope', 'gridService', function ($scope, gridService) {
$scope.clickMe = function() {
$scope.LoadNextPage = gridService.LoadNextPage("5");
}
}]);
var gridService = function() {
return {
LoadNextPage: function (hh) {
alert(hh);
}
};
};
app.factory('gridService', ['$http', '$rootScope', gridService]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="employee" ng-controller="EmpCtrl">
<button ng-click="clickMe()">Button</button>
</div>
you not defined gridOptions function see this link:
angular.module("myApp", []).controller("myCon", function($scope, $interval, gridService){
$scope.LoadNextPage = gridService.LoadNextPage("5");
}).factory('gridService', ['$http', '$rootScope', gridService]);
function gridService($http, $rootScope){
return {
LoadNextPage: function (hh) {
alert(hh);
}
};
}
see this link

Angular.js | Sharing a ngModel

So, this is my HTML.
<input type="text" id="ghusername" ng-model="username" placeholder="Github username...">
<span id="ghsubmitbtn" ng-click="getUsers()">Pull User Data</span>
This is my Controller A.
app.controller("homeController", ["$scope", "$http", function ($scope, $http) {
$scope.getUsers = function () {
$http.get("https://api.github.com/users/" + $scope.username)
.success(function (data) {
//some stuff
})
And this is B (for posting sake). How do I get this username on the HTML ngModel, so that I can show it in another controller? ex:
app.controller("reposController", ["$scope", "$http", function ($scope, $http) {
$scope.getRepos = function () {
$http.get("https://api.github.com/users/" + $scope.username + "/repos")
.success(function (data) {
// some stuff
})
};
I've tried to user services, factories and even $rootScopes, but they just don't seem to work, any help? Btw, if I wasn't clear tell me and I will edit the post, Thank you.
EDIT: I ended up using $rootScope, I know it isn't the best idea but it was a minor thing. I'll keep all your answers for reference tho, as I'm sure they all work but I'm just too dumb to implement them.. Thank you.
You must to refernce $rootScope into your controllers:
app.controller("homeController", ["$scope", "$http","$rootScope", function ($scope, $http, $rootScope) ...
and after that just access rootscope variables:
controller1: $rootScope.someValue = "some value";
Controller2: $scope.controllerScopeValue = $rootScope.someValue;
Use service
app.service('name', [function(){}])
Then add 'name' to both the controllers like
app.controller("reposController", ["$scope", "$http", 'name', function ($scope, $http, name) {
$scope.name = name;
Then you can access it like
name.username
and in html
<input type="text" id="ghusername" ng-model="name.username" placeholder="Github username...">
Try something like this
http://jsfiddle.net/devkickstart/nevyhdn0/2/
Using a factory you can share the data between controller like so...
<div ng-app="myApp">
<div data-ng-controller="reposCtrl">
<input type="text" id="ghusername" ng-model="username" placeholder="Github username..." ng-init="getRepos()" />
{{data}}
</div>
<div data-ng-controller="homeCtrl"> <span id="ghsubmitbtn" ng-click="getUsers()">Pull User Data</span>
{{otherData}}
</div>
</div>
angular.module("myApp", [])
.factory("dataFact", ["$rootScope", function ($rootScope) {
var myData = "value from factory";
return {
getData: function () {
return myData;
},
setData: function (newVal) {
this.myData = newVal;
}
}
}]).controller("homeCtrl", ["$scope", "dataFact", function ($scope, dataFact) {
$scope.getUsers = function () {
$scope.otherData = dataFact.getData();
}
}]).controller("reposCtrl", ["$scope", "dataFact", function ($scope, dataFact) {
$scope.getRepos = function () {
$scope.username = dataFact.getData();
}
}]);
With some assumptions about your data model, this should work.
It creates a shared singleton object. One controller adds the user (or whatever data) as an attribute of that. Then other controllers, or indeed the same controller if it is reloaded, can then access the same data on shared.
Note here that a service just returns a singleton of anything, it doesn't need code or methods. In this case, it's easier to use a value instead which is shorthand for function() { return {}; } and works just as well.
Remember to inject shared wherever it is needed.
app.controller("homeController", ["$scope", "$http", "shared", function ($scope, $http, shared) {
$scope.getUsers = function () {
$http.get("https://api.github.com/users/" + $scope.username)
.success(function (data) {
shared.user = data.user; // or wherever it comes from
//some stuff
})
app.controller("reposController", ["$scope", "$http", "shared", function ($scope, $http, shared) {
$scope.getRepos = function () {
$http.get("https://api.github.com/users/" + shared.user.name + "/repos")
.success(function (data) {
// some stuff
})
};
app.value('shared', {});

Syncing data between controllers through a service

From this stackoverflow question, my understanding is that I should be using services to pass data between controllers.
However, as seen in my example JSFiddle, I am having trouble listening to changes to my service when it is modified across controllers.
angular.module('myApp', [])
.controller('Ctrl1', function ($scope, App) {
$scope.status = App.data.status;
$scope.$watch('App.data.status', function() {
$scope.status = App.data.status;
});
})
.controller('Ctrl2', function ($scope, App) {
$scope.status = App.data.status;
$scope.$watch('status', function() {
App.data.status = $scope.status;
});
})
.service('App', function () {
this.data = {};
this.data.status = 'Good';
});
In my example, I am trying to subscribe to App.data.status in Ctrl1, and I am trying to publish data from Ctrl1 to App. However, if you try to change the input box in the div associated with Ctrl2, the text does not change across the controller boundary across to Ctrl1.
http://jsfiddle.net/VP4d5/2/
Here's an updated fiddle. Basically if you're going to share the same data object between two controllers from a service you just need to use an object of some sort aside from a string or javascript primitive. In this case I'm just using a regular Object {} to share the data between the two controllers.
The JS
angular.module('myApp', [])
.controller('Ctrl1', function ($scope, App) {
$scope.localData1 = App.data;
})
.controller('Ctrl2', function ($scope, App) {
$scope.localData2 = App.data;
})
.service('App', function () {
this.data = {status:'Good'};
});
The HTML
<div ng-controller="Ctrl1">
<div> Ctrl1 Status is: {{status}}
</div>
<div>
<input type="text" ng-model="localData1.status" />
</div>
<div ng-controller="Ctrl2">Ctrl2 Status is: {{status}}
<div>
<input type="text" ng-model="localData2.status" />
</div>
</div>
Nothing wrong with using a service here but if the only purpose is to have a shared object across the app then I think using .value makes a bit more sense. If this service will have functions for interacting with endpoints and the data be sure to use angular.copy to update the object properties instead of using = which will replace the service's local reference but won't be reflected in the controllers.
http://jsfiddle.net/VP4d5/3/
The modified JS using .value
angular.module('myApp', [])
.controller('Ctrl1', function ($scope, sharedObject) {
$scope.localData1 = sharedObject;
})
.controller('Ctrl2', function ($scope, sharedObject) {
$scope.localData2 = sharedObject;
})
.value("sharedObject", {status:'Awesome'});
I agree with #shaunhusain, but I think that you would be better off using a factory instead of a service:
angular.module('myApp', [])
.controller('Ctrl1', function ($scope, App) {
$scope.localData1 = App.data;
})
.controller('Ctrl2', function ($scope, App) {
$scope.localData2 = App.data;
})
.factory('App', function () {
var sharedObj = {
data : {
status: 'Good'
}
};
return sharedObj;
});
Here are some information that might help you understand the differences between a factory and a service: When creating service method what's the difference between module.service and module.factory

Categories

Resources