i wrote a small controller where i declare a variable with var keyword which is not in scope. does it means that is private in scope ? see my code.
<div ng-app="myApp" ng-controller="myCtrl">
{{test}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
var test='test hello';
$scope.Operantion = 'hello';
$scope.GetData = function () {
abc();
};
function abc()
{
alert(test);
}
$scope.GetData();
});
the var test variable should be consider as private variable ?
if i declare a function with just function xxx() then it should be consider as private function. i am new in angular. so when testing code then many question is coming to my mind. so please guide me. thanks
Yes. var test and function xxx() should be considered "private" or, better, local data and function.
For reference see:
Angularjs scope
What is the scope of variables in javascript
Scope is an object, that the view can see and read values from it. By declaring a 'var', you are creating an object outside of the scope, but in the context of the controller function.
BUT the html, that comes with that controller via the ng-controller attribute for example, can only see properties of the scope of that controller.
import {Pipe, PipeTransform} from '#angular/core';
#Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
transform(arg1) {
let data = '';
for (let i = 0; i < arg1.length; i++) {
data = arg1[i] + data;
}
return data;
}
}
Related
If i pass the factory name inside my controller parameter, the function inside it seems not work, also in the view i see the render of brackets....
What i am doing wrong?
HERE WHAT I SEE:
instead, If i don't pass the service inside the controller, it seems to work
JS
var LandingApp = angular.module('LandingApp',[]);
LandingApp.factory('PreventivoTotaleFront',function(){
var voci = {};
voci.lista = [];
AggiungiVoce.add = function(voce){
voci.lista.push({
id: voci.lista.length,
costo: voce
})
};
return voci;
});
//CONTROLLER
LandingApp.controller('numberpages',function($scope,PreventivoTotaleFront){
$scope.primapagina = 150;
$scope.altrepagine = 90;
$scope.numeroaltrepagine = 0;
$scope.TotaleEuroPagine = 0;
$scope.CalcolaTotaleEuroPagine = function(){
return $scope.TotaleEuroPagine = $scope.altrepagine * $scope.numeroaltrepagine + $scope.primapagina;
AggiungiVoce.add(TotaleEuroPagine);
alert(TotaleEuroPagine);
};
});
The HTML
<body ng-app="LandingApp">
<div class="container" ng-controller="numberpages">
<form>
<label>N° Pagine interne: </label><input type="number" min="0" ng-model="numeroaltrepagine" ng-change="CalcolaTotaleEuroPagine()"></input>
<br/>{{TotaleEuroPagine | currency:""}}€<br/>
</form>
<br/><br/>
<ul>
<li ng-repeat="VociPreventivo in lista.voci">{{voci.id}} : {{voci.costo}}</li>
</ul>
</div>
</body>
You are not using factory properly. You need to return a object containing methods.
var LandingApp = angular.module('LandingApp', []);
LandingApp.factory('PreventivoTotaleFront', function () {
var voci = {};
voci.lista = [];
return {
add: function (voce) {
voci.lista.push({
id: voci.lista.length,
costo: voce
})
}
};
});
As use factory in the controller i.e. PreventivoTotaleFront.add()
//CONTROLLER
LandingApp.controller('numberpages', function ($scope, PreventivoTotaleFront) {
$scope.CalcolaTotaleEuroPagine = function () {
PreventivoTotaleFront.add(TotaleEuroPagine);
};
});
In your factory PreventivoTotaleFront, you return voci object if you put your function add inside this returning object like
voci: {
add: function() {}
}
and then you can call it from your controller like
PreventivoTotaleFront.add()
You're not creating your AggiungiVoce variable(with var) before you use it(in AggiungiVoce.add). In such a case, JavaScript looks in parent scope for the existence of that variable AggiungiVoce all the way up to global scope. There it's assigned. So that is why you're able to use it when the factory is not injected.
In the factory, you should create an object of methods and return that. Since factories are only created once, you are able to access those methods anywhere you inject the factory.
Same issue as here: AngularJS directive binding a function with multiple arguments
Following this answer: https://stackoverflow.com/a/26244600/2892106
In as small of a nutshell as I can.
This works:
<my-directive on-save="ctrl.saveFn"></my-directive>
With:
angular.module('app')
.controller('MyController', function($scope) {
var vm = this;
vm.saveFn = function(value) { vm.doSomethingWithValue(value); }
});
But when I convert to Typescript and use real classes, this breaks.
class MyController {
constructor() {}
saveFn(value) {
this.doSomethingWithValue(value);
}
}
In the Typescript version when debugging, "this" is referencing the Window global. So my scope is messed up somehow, but I don't know how to fix it. How can I get "this" to refer to MyController as expected?
So my scope is messed up somehow
Use an arrow function instead of a method.
Fixed
class MyController {
constructor() {}
saveFn = (value) => {
this.doSomethingWithValue(value);
}
}
More
https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html
I am trying to implement this simple Plunker with no success.
I have a simple service (factory) :
(function () {
'use strict';
angular
.module('app.core')
.factory('PropertiesService', PropertiesService);
function PropertiesService() {
var sefl = this;
self.name = 'Properties Service'
self.properties = {};
self.setProperties = function (prop)
{
self.properties = prop;
}
return self;
}
})();
I am calling this service from a directive :
var prop = { 'top': top, 'left': left, 'position': position };
service.setProperties(prop);
The contoller being updated is :
(function () {
'use strict';
angular
.module('app.properties')
.controller('Properties', Properties);
Properties.$inject = ['PropertiesService'];
function Properties(PropertiesService) {
var vm = this;
vm.collection = {};
setCollection();
function setCollection() {
for (var key in PropertiesService.properties) {
if (PropertiesService.properties.hasOwnProperty(key)) {
vm.collection[key] = PropertiesService.properties[key];
}
}
};
}
})();
Lastly , I am showing the data in html like this :
<div ng-controller="Properties as vm">
<ul class="list-group">
<li class="list-group-item" ng-repeat="(key, value) in vm.collection">
<span>{{key}}</span> : <span>{{value}}</span>
</li>
</ul>
</div>
I understand why i'm getting result only on initialization but I can not find the way to solve it,to make the controller updated when the service is changed (and it does) .
Thanks
Just to note something.
In your plunker you use a service and you try the same code with a factory. This cannot work. there are some differences between the two providers.
Either you use a factory:
function PropertiesFactory() {
// facory doens't get invoked with the new keyword
// so there is no this
var self = {};
self.name = 'Properties Factory'
self.properties = {};
self.setProperties = function (prop)
{
self.properties = prop;
}
return self;
}
or a service:
function PropertiesService() {
var sefl = this;
self.name = 'Properties Service'
self.properties = {};
self.setProperties = function (prop)
{
self.properties = prop;
}
// there is no need for return
// since th service gets invoked with the new keyword
}
form the angularjs docs about providers:
The Service recipe produces a service just like the Value or Factory
recipes, but it does so by invoking a constructor with the new
operator. The constructor can take zero or more arguments, which
represent dependencies needed by the instance of this type.
As it turn out i was hiding an important part of the code , not deliberately but from lack of understanding.
My directive is listening on DOM events and acting upon their changed data.
After reading this article (and help from my CTO...) I understood i needed to manually call $scope.$apply().
Now I have an element i can resize,drag etc. and have its changed properties eflect on the screen.
Now the binding is working again I can revert the controller code to look like this:
function Properties(PropertiesService) {
var vm = this;
vm.collection = PropertiesService.data;
}
Everything is in sync.
Sorry for the partial data , and thanks for the help.
Gilad
I'm trying to wrap my head around how to use Typescript and Angularjs together. I've read several blog posts and both projects' documentation but it isn't sticking.
I have an Angular controller that takes two dependencies, $scope and a service that I wrote called greetingService. I've defined a main app Angular module and attached the controller and service to it. I have log statements in my Typescript constructors so that I can inspect the dependencies in the browser. In the constructors of both my controller and my custom service, the dependencies are injected correctly. However, in the controller, when I try to use a dependency, it is undefined. I think this code snippet demonstrates the issue better than I can explain it.
declare var angular;
module App.Services {
export class GreetingService {
constructor(private $http) {
console.log("In greeting service constructor");
console.log($http);
}
getGreetingsPromise() {
return this.$http.get('/greetings.json');
}
}
}
module App.Controllers {
export class GreetingController {
static $inject = ['$scope', 'greetingService'];
constructor(public $scope, public greetingService: App.Services.GreetingService) {
this.$scope.greeting = "This will be a greeting.";
this.$scope.greet = this.greet;
console.log(greetingService); // this is defined and looks right
}
greet(language: string) {
console.log("Greeting...");
console.log(this.$scope); // this is undefined
console.log(this.greetingService); // this is undefined
var greetingPromise = this.greetingService.getGreetingsPromise();
greetingPromise.then(data => this.$scope.greeting = data[language]);
}
}
}
var mainApp = angular.module('mainApp', []);
mainApp.controller('greetingController', ['$scope', 'greetingService', App.Controllers.GreetingController]);
mainApp.service('greetingService', App.Services.GreetingService);
And here is the Angular template (that correctly displays "This will be a greeting" that is initialized in the constructor).
<div class="jumbotron">
<div ng-controller="greetingController">
<p class="lead">{{greeting}}</p>
<button ng-click="greet('english')">Greet me</button>
</div>
</div>
This line:
this.$scope.greet = this.greet
is the problem. You are just copying the function reference to a scope property and when it is called with scope this won't be the controller instance, it is determined by the caller (in your case, this should be the scope itself inside the greet function when it is called from the template) except for the bound functions. A quick fix would be to use function.bind. i.e this.$scope.greet = this.greet.bind(this) with which you create a bound function, function reference bound to the controller instance. You could also use an arrow function and assign it as reference, this will force TS to convert any this to _this cached variable:
greet = (language: string) => {
console.log("Greeting...");
console.log(this.$scope); // this is undefined
console.log(this.greetingService); // this is undefined
var greetingPromise = this.greetingService.getGreetingsPromise();
greetingPromise.then(data => this.$scope.greeting = data[language]);
}
Ideally if you use controller As (provided your angular supports it, if not highly recommended to upgrade) syntax rather than using scope directly you would not need do all these.
i.e:
export class GreetingController {
greeting :string;
static $inject = ['greetingService'];
constructor(public greetingService: App.Services.GreetingService) {
this.greeting = "This will be a greeting.";
}
greet(language: string) {
var greetingPromise = this.greetingService.getGreetingsPromise();
greetingPromise.then(data => this.greeting = data[language]);
}
}
and
<div class="jumbotron">
<div ng-controller="greetingController as vm">
<p class="lead">{{vm.greeting}}</p>
<button ng-click="vm.greet('english')">Greet me</button>
</div>
</div>
I'm trying to see if there's a simple way to access the internal scope of a controller through an external javascript function (completely irrelevant to the target controller)
I've seen on a couple of other questions here that
angular.element("#scope").scope();
would retrieve the scope from a DOM element, but my attempts are currently yielding no proper results.
Here's the jsfiddle: http://jsfiddle.net/sXkjc/5/
I'm currently going through a transition from plain JS to Angular. The main reason I'm trying to achieve this is to keep my original library code intact as much as possible; saving the need for me to add each function to the controller.
Any ideas on how I could go about achieving this? Comments on the above fiddle are also welcome.
You need to use $scope.$apply() if you want to make any changes to a scope value from outside the control of angularjs like a jquery/javascript event handler.
function change() {
alert("a");
var scope = angular.element($("#outer")).scope();
scope.$apply(function(){
scope.msg = 'Superhero';
})
}
Demo: Fiddle
It's been a while since I posted this question, but considering the views this still seems to get, here's another solution I've come upon during these last few months:
$scope.safeApply = function( fn ) {
var phase = this.$root.$$phase;
if(phase == '$apply' || phase == '$digest') {
if(fn) {
fn();
}
} else {
this.$apply(fn);
}
};
The above code basically creates a function called safeApply that calles the $apply function (as stated in Arun's answer) if and only Angular currently isn't going through the $digest stage. On the other hand, if Angular is currently digesting things, it will just execute the function as it is, since that will be enough to signal to Angular to make the changes.
Numerous errors occur when trying to use the $apply function while AngularJs is currently in its $digest stage. The safeApply code above is a safe wrapper to prevent such errors.
(note: I personally like to chuck in safeApply as a function of $rootScope for convenience purposes)
Example:
function change() {
alert("a");
var scope = angular.element($("#outer")).scope();
scope.safeApply(function(){
scope.msg = 'Superhero';
})
}
Demo: http://jsfiddle.net/sXkjc/227/
Another way to do that is:
var extScope;
var app = angular.module('myApp', []);
app.controller('myController',function($scope, $http){
extScope = $scope;
})
//below you do what you want to do with $scope as extScope
extScope.$apply(function(){
extScope.test = 'Hello world';
})
we can call it after loaded
http://jsfiddle.net/gentletech/s3qtv/3/
<div id="wrap" ng-controller="Ctrl">
{{message}}<br>
{{info}}
</div>
<a onClick="hi()">click me </a>
function Ctrl($scope) {
$scope.message = "hi robi";
$scope.updateMessage = function(_s){
$scope.message = _s;
};
}
function hi(){
var scope = angular.element(document.getElementById("wrap")).scope();
scope.$apply(function() {
scope.info = "nami";
scope.updateMessage("i am new fans like nami");
});
}
It's been a long time since I asked this question, but here's an answer that doesn't require jquery:
function change() {
var scope = angular.element(document.querySelector('#outside')).scope();
scope.$apply(function(){
scope.msg = 'Superhero';
})
}
Here's a reusable solution: http://jsfiddle.net/flobar/r28b0gmq/
function accessScope(node, func) {
var scope = angular.element(document.querySelector(node)).scope();
scope.$apply(func);
}
window.onload = function () {
accessScope('#outer', function (scope) {
// change any property inside the scope
scope.name = 'John';
scope.sname = 'Doe';
scope.msg = 'Superhero';
});
};
You can also try:
function change() {
var scope = angular.element( document.getElementById('outer') ).scope();
scope.$apply(function(){
scope.msg = 'Superhero';
})
}
The accepted answer is great. I wanted to look at what happens to the Angular scope in the context of ng-repeat. The thing is, Angular will create a sub-scope for each repeated item. When calling into a method defined on the original $scope, that retains its original value (due to javascript closure). However, the this refers the calling scope/object. This works out well, so long as you're clear on when $scope and this are the same and when they are different. hth
Here is a fiddle that illustrates the difference: https://jsfiddle.net/creitzel/oxsxjcyc/
I'm newbie, so sorry if is a bad practice. Based on the chosen answer, I did this function:
function x_apply(selector, variable, value) {
var scope = angular.element( $(selector) ).scope();
scope.$apply(function(){
scope[variable] = value;
});
}
I'm using it this way:
x_apply('#fileuploader', 'thereisfiles', true);
By the way, sorry for my english
<input type="text" class="form-control timepicker2" ng-model='programRow.StationAuxiliaryTime.ST88' />
accessing scope value
assume that programRow.StationAuxiliaryTime is an array of object
$('.timepicker2').on('click', function ()
{
var currentElement = $(this);
var scopeValues = angular.element(currentElement).scope();
var model = currentElement.attr('ng-model');
var stationNumber = model.split('.')[2];
var val = '';
if (model.indexOf("StationWaterTime") > 0) {
val = scopeValues.programRow.StationWaterTime[stationNumber];
}
else {
val = scopeValues.programRow.StationAuxiliaryTime[stationNumber];
}
currentElement.timepicker('setTime', val);
});
We need to use Angular Js built in function $apply to acsess scope variables or functions outside the controller function.
This can be done in two ways :
|*| Method 1 : Using Id :
<div id="nameNgsDivUid" ng-app="">
<a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
{{ nameNgsVar }}
</div>
<script type="text/javascript">
var nameNgsDivVar = document.getElementById('nameNgsDivUid')
function actNgsFnc()
{
var scopeNgsVar = angular.element(nameNgsDivVar).scope();
scopeNgsVar.$apply(function()
{
scopeNgsVar.nameNgsVar = "Tst Txt";
})
}
</script>
|*| Method 2 : Using init of ng-controller :
<div ng-app="nameNgsApp" ng-controller="nameNgsCtl">
<a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
{{ nameNgsVar }}
</div>
<script type="text/javascript">
var scopeNgsVar;
var nameNgsAppVar=angular.module("nameNgsApp",[])
nameNgsAppVar.controller("nameNgsCtl",function($scope)
{
scopeNgsVar=$scope;
})
function actNgsFnc()
{
scopeNgsVar.$apply(function()
{
scopeNgsVar.nameNgsVar = "Tst Txt";
})
}
</script>
This is how I did for my CRUDManager class initialized in Angular controller, which later passed over to jQuery button-click event defined outside the controller:
In Angular Controller:
// Note that I can even pass over the $scope to my CRUDManager's constructor.
var crudManager = new CRUDManager($scope, contextData, opMode);
crudManager.initialize()
.then(() => {
crudManager.dataBind();
$scope.crudManager = crudManager;
$scope.$apply();
})
.catch(error => {
alert(error);
});
In jQuery Save button click event outside the controller:
$(document).on("click", "#ElementWithNgControllerDefined #btnSave", function () {
var ngScope = angular.element($("#ElementWithNgControllerDefined")).scope();
var crudManager = ngScope.crudManager;
crudManager.saveData()
.then(finalData => {
alert("Successfully saved!");
})
.catch(error => {
alert("Failed to save.");
});
});
This is particularly important and useful when your jQuery events need to be placed OUTSIDE OF CONTROLLER in order to prevent it from firing twice.