In the below code,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script type="text/javascript">
function MyController() {
this.Name = "jag";
this.sal = "4500";
}
MyController.prototype.getAnnualSal = function(){
return (this.sal) * 12;
}
var app = angular.module("sample", []).run(function($rootScope) {
$rootScope.variable = 1;
});
app.controller("emp", MyController);
</script>
</head>
<body ng-app="sample">
<div ng-controller="emp as o" >
Hello {{o.Name}}, your annual salary is {{o.getAnnualSal()}}
</div>
</body>
</html>
Using run syntax, $rootScope.variable is introduced at module(sample) level.
What is the syntax to access $rootScope.variable in MyController?
Inject rootScope in controller like this.
angular.module('sample', []).controller('emp', function($scope, $rootScope) {
};
Aside from your issue I dont know why you are mixing controller code in view.Angular is built on MVVM pattern.So separation of controller and view is recommended.
You could do the following, inject $rootScope into the controller
<script type="text/javascript">
function MyController($rootScope) {
this.Name = "jag";
this.sal = "4500";
}
MyController.prototype.getAnnualSal = function(){
return (this.sal) * 12;
}
var app = angular.module("sample", []).run(function($rootScope) {
$rootScope.variable = 1;
});
MyController.$inject = ['$rootScope'];
app.controller("emp", MyController);
</script>
Related
I have a function below that works fine and passes info into and retrieves from a cookieStore without issue
$scope.num = 0
$scope.nums = []
$scope.increment = function () {
$scope.num++
}
$scope.$watch('num', function () {
$scope.nums.push($scope.num)
})
$scope.storeProductsInCookie=function(){
$cookieStore.put("invoices",$scope.nums)
};
$scope.getProductsInCookie=function(){
console.log( $cookieStore.get("invoices",$scope.nums));
}
However when I try with the below verufyGuess function that is injecting the Index and no as parameters into the function it fails to place into the cookieStore
$scope.verifyGuess = function (Index , no) {
$scope.votes = {};
$scope.newVotes = []
$scope.votes[Index] = $scope.votes[Index] || 0;
$scope.votes[Index]+= no;
$scope.$watch('votes', function () {
$scope.newVotes.push($scope.votes)
})
$scope.storeProductsInCookie=function(){
$cookieStore.put("invoices",$scope.newVotes)
};
$scope.getProductsInCookie=function(){
console.log( $cookieStore.get("invoices",$scope.newVotes));
}
$cookieStore is Deprecated: (since v1.4.0)
Please use the $cookies service instead.
$scope.nums is an array of strings.So $cookieStore is storing them as string(cookies only support strings to store).
In second case $scope.newVotes is an array of objects. cookies wont store objects.
you must use $cookieStore.put("invoices", JSON.stringify($scope.newVotes))
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular-cookies.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<script>
var app = angular.module('plunker', ['ngCookies']);
app.controller('MainCtrl', function($scope, $cookies) {
$scope.votes = {};
$scope.newVotes = []
var Index = 0;
$scope.votes[Index] = $scope.votes[Index] || 0;
$scope.votes[Index] += 10;
$scope.newVotes.push($scope.votes)
$scope.storeProductsInCookie = function() {
$cookies.put("invoices", JSON.stringify($scope.newVotes))
};
$scope.getProductsInCookie = function() {
console.log($cookies.get("invoices"));
}
$scope.storeProductsInCookie();
$scope.getProductsInCookie();
});
</script>
</body>
</html>
So I am getting an angular [$injector:unpr] error. Yes, I know what that normally means...I haven't defined something somewhere, or I am redefining the module over and over, or the like...but for the life of me I'm struggling to see the issue in my code.
I'm sure I'm missing something insanely basic, but after I've stared at code for a couple of hours, I go blind to it.
My HTML File:
<!DOCTYPE html>
<html ng-app="email">
<head>
<meta charset="UTF-8">
<title>Authentication</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'/>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<div ng-controller="EmailAuthController as auth">
<h1>Authentication</h1>
<p>Request: [{{auth.request}}]</p>
<p>{{auth.response}}</p>
<p>{{1+2}}</p>
</div>
<script type="text/javascript" src="js/controllers/email.js"></script>
</body>
</html>
My email.js file (As you can see, I've commented out some stuff to try to isolate the issue):
/* global angular parseGet */
function parseGet(val) {
var result = '', // = "Not found",
tmp = [];
var items = location.search.substr(1).split('&');
for (var index = 0; index < items.length; index++) {
tmp = items[index].split('=');
if (tmp[0] === val) {
result = decodeURIComponent(tmp[1]);
}
}
return result;
}
(function () {
angular
.module('email', [])
.controller('EmailAuthController', [ '$scope','authFactory', function ($scope,authFactory) {
var vm = this,
req = parseGet('hash') || '';
vm.request = req;
// authFactory.validate(req)
// .then(function (response) {
// vm.response = response.data;
// });
}])
.factory('authFactory', [ '$rootScope', '$http', 'config', function ($rootScope, $http, config) {
var validate = function (hash) {
var url = config.SERVICE_URI + '/auth/email/' + hash;
return $http.get(url);
};
return {
validate: validate
};
}]);
})();
From the code you've given it appears config is not defined in your authFactory injection.
.factory('authFactory', [ '$rootScope', '$http', 'config', function(a, b, c) {} ]); // config is not defined
I have my model in a Service, all my model is in an object, I would like to be able to reset my model by just reassign my model to an empty object, but it doesn't seem to work, but if I delete a property directly it does.
How could I reset my model without having to delete every property, refresh the page or doing big changes?
(function () {
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function (MyService) {
var _this = this;
_this.model = MyService.model;
_this.myService = MyService;
_this.deleteInService = function () {
MyService.functions.resetModel();
};
});
myApp.service('MyService', function () {
var obj = {};
obj.model = {x: 1};
obj.functions = {};
obj.functions.resetModel = function () {
//delete obj.model.x; //THIS WORKS!
obj.model = {x: 1}; //BUT THIS DOESN'T :(
};
return obj;
});
})();
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="changingModelInService.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController as myCtrl">
{{myCtrl.model.x}}<div><input ng-model="myCtrl.model.x"/></div>
<button ng-click="myCtrl.deleteInService()">Delete X in service</button>
</body>
</html>
Thank you.
Edit: doing _this.model = MyService.model it's not possible because I share my Service with many controllers
I think one solution to your problem would be to create a default model variable like a master copy and use angular.copy with two parameters resetting the model to a master version when invoking that method.
See the angular.copy documentation here. You'll notice the live demo actually shows a reset functionality.
I've updated the live demo plunker to show the behaviour I think you desire http://plnkr.co/edit/BJ....
Hope that helps!
UPDATE::
A possible implementation although will require testing would be as follows;
myApp.service('MyService', function () {
var masterModel = {x: 1};
var obj = {
model: {x: 1},
functions: {
resetModel: function() {
angular.copy(masterModel, obj.model);
}
}
};
return obj;
});
Other than angular.copy, another solution is just to not use _this.model and use _this.myService.model instead or to change your deleteInService function to
_this.deleteInService = function () {
MyService.functions.resetModel();
_this.model = MyService.model;
};
The reason you're getting this problem is because you're doing something like this:
service.model = foo;
controller.model = service.model; // implies controller.model = foo;
service.reset(); // => service.model = bar;
// But notice that controller.model still points to the old object foo
Run the code snippet below to see what I mean.
(function () {
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function (MyService) {
var _this = this;
_this.model = MyService.model;
_this.serviceModel = MyService.model;
_this.myService = MyService;
_this.deleteInService = function () {
MyService.functions.resetModel();
_this.serviceModel = MyService.model;
};
});
myApp.service('MyService', function () {
var obj = {};
obj.model = {x: 1};
obj.functions = {};
obj.functions.resetModel = function () {
//delete obj.model.x; //THIS WORKS!
obj.model = {x: 1}; //BUT THIS DOESN'T :(
};
return obj;
});
})();
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="changingModelInService.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController as myCtrl">
<pre>myCtrl.model = {{myCtrl.model}}</pre>
<pre>myCtrl.serviceModel = {{myCtrl.serviceModel }}</pre>
<pre>myCtrl.myService.model = {{myCtrl.myService.model}}</pre>
<div><input ng-model="myCtrl.model.x"/></div>
<button ng-click="myCtrl.deleteInService()">Delete X in service</button>
</body>
</html>
So i've split out my UI into subcomponents but then i realise that one of the components requires to be react to a dropdown change which is caught by the parent controller.
I can create a shared service for the variables and i have been able to inject the sub controller so that i can kick off functions BUT.
how do i then use the scope within the sub controller?
var ctrl1= $scope.$new();
$controller('ctrl', { $scope: ctrl1});
ctrl1.GetData();
this works fine. I can see data coming back in the console. BUT my ui doesnt change. What am i missing?
I've edited the post to illustrate what i'm attempting to do more clearly.
The drop down on change is caught by the parent controller but i then require the child controller to run away and get some data and update the UI.
It's an attempt to split out the components. Is this possible? Or have a split the components out too far?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
angular.module('app2', [])
.controller('ctrl2', ['$scope', '$http', function($scope, $http){
$scope.getdata = function(){
$http.post(WebServiceURL)
.success(function(data){
$scope.app2Data = "test2 data";
});
}
}]);
angular.module('app1', ['app2'])
.controller('ctrl1', ['$scope','$controller',function($scope, $controller){
$scope.name = 'Controller 1';
//just something to put in the ddp
$scope.data = [
{id:1, name: "test"},
{id:2, name: "test2"}
]
$scope.makeChanged = function(id){
//ddp has changed so i refresh the ui with some other data which is in got by ctrl2.
var cl2 = $scope.$new();
$controller('ctrl2', { $scope: cl2 });
cl2.getdata();
}
}]);
</script>
</head>
<body ng-app="app1">
<div ng-controller="ctrl1">
<p>here is: {{name}}</p>
<select ng-model="d" ng-options="d as dat.name for dat in data track by dat.id" ng-change="makeChanged(d.id)"></select>
<div>
{{app2Data.text}}
</div>
</div>
</body>
</html>
for anyone interested here's how i got round this.
I created a shared service between the two controllers. and created a callback on the service. i registered the call back on ctrl2 so when the shared variable changed the controller2 will do what i want it to and scope is freshed.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script>
angular.module('app1', ['app2'])
.controller('ctrl1', ['$scope', '$controller', 'appointmentSharedProperties',
function($scope, appointmentSharedProperties) {
$scope.name1 = 'Controller 1';
console.log('ctrl1');
//just something to put in the ddp
$scope.data = [{
id: 1,
name: 'test'
}, {
id: 2,
name: 'test2'
}];
$scope.makeChanged = function(value) {
//ddp has changed so i refresh the ui with some other data which is in got by ctrl2.
appointmentSharedProperties.setDetail(value);
console.log('in makeChanged: ' + value);
}
}
]).service('appointmentSharedProperties', function() {
var test = '';
var __callback = [];
return {
getDetail: function() {
return test;
},
setDetail: function(value) {
test = value;
if (__callback.length > 0) {
angular.forEach(__callback, function(callback) {
callback();
});
}
},
setCallback: function(callback) {
__callback.push(callback);
}
};
});
angular.module('app2', [])
.controller('ctrl2', ['$scope', 'appointmentSharedProperties',
function($scope, appointmentSharedProperties) {
$scope.name2 = 'Controller 2';
console.log('ctrl2');
var getdata = function() {
console.log('in getdata');
$scope.app2Data = appointmentSharedProperties.getDetail();
}
appointmentSharedProperties.setCallback(getdata);
}
]);
</script>
</head>
<body ng-app="app1">
<div ng-controller="ctrl1">
<p>here is: {{name1}}</p>
<p>here is: {{name2}}</p>
<select ng-model="d" ng-options="d as dat.name for dat in data track by dat.id" ng-change="makeChanged(d.name)"></select>
<div>
{{app2Data}}
</div>
</div>
</body>
</html>
General example of how to pass variables from one controller to other
<html>
<head>
<meta charset="ISO-8859-1">
<title>Basic Controller</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl1">
{{greeting}}
</div>
<div ng-controller="ctrl2">
{{dataToHtml2}}
</div>
</body>
</html>
This is the javascript file for this
var myApp = angular.module('myApp',[]);
myApp.service('sampleService', function(){
var temp = '';
this.setValue = function(data){
temp = data;
}
this.getValue = function(){
return temp;
}
});
myApp.controller('ctrl1', function($scope,sampleService) {
$scope.greeting = 'This line is in first controller but I exist in both';
var data= $scope.greeting;
sampleService.setValue(data);
});
myApp.controller('ctrl2', function($scope, sampleService){
$scope.dataToHtml2 =sampleService.getValue();
});
Here is the blog that explains this flow : Frequently asked questions in angularjs
It has the demo of what I written. Happy coding..!!
I believe I have set everything for Angular to work in Phonegap, but apparently the deviceready function is not having the behavior that I expect.
So here is how I set:
index.html
<html ng-app="app">
<head>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/lib/ready.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="header" ng-controller="HeaderController">
<h3 id="logo"><img src="img/logo.png"/></h3>
<p>{{title}}</p>
<button ng-click="changeTitle()"></button>
</div>
</body>
</html>
app.js
$app = angular.module('app', ['fsCordova']);
$app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
$app.controller('HeaderController', function($scope, CordovaService) {
CordovaService.ready.then(function() {
console.log("Setting the title");
$scope.title = "This title";
$scope.changeTitle = function() {
console.log("Changing the title");
$scope.title = "Title changed";
}
});
});
ready.js from: http://www.ng-newsletter.com/posts/angular-on-mobile.html#native
angular.module('fsCordova', [])
.service('CordovaService', ['$document', '$q',
function($document, $q) {
var d = $q.defer(),
resolved = false;
var self = this;
this.ready = d.promise;
document.addEventListener('deviceready', function() {
resolved = true;
d.resolve(window.cordova);
});
// Check to make sure we didn't miss the
// event (just in case)
setTimeout(function() {
if (!resolved) {
if (window.cordova) d.resolve(window.cordova);
}
}, 3000);
}]);
The title is appearing the way it is {{title}}, not its value. When I click the button, nothing happens, not even the debug logs on the console. Any tips how to set Angular on Phonegap? Thanks.
Apparently on angular 1.2 the urlSanitizationWhitelist doesn't exist anymore.
So I just had to remove the $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); line and it worked