I am trying to organize my (elsewhere defined) variables in an array, but this breaks the two-way-binding. I don't understand why I can bind to a variable directly, but not indirectly. I guess this is some stupid mistake.
Example here (jsfiddle) or below:
Html:
<div ng-controller="MyCtrl">
<input ng-model="test1"></input>
<input ng-model="test2[0]"></input>
<p>{{test1}}</p>
</div>
Javascript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.test1 = 'text goes here';
$scope.test2 = [$scope.test1];
}
As you can see the first input is bound to the variable and updates it correctly, while the second one takes the initial value, but isn't bound.
It is working actually. See https://jsfiddle.net/ryekxkpL/2/
The $scope.test2[0] is a copy of $scope.test1, so it's the same as if you had $scope.test2 = ['text goes here']; Changing it won't effect $scope.test1.
Related
I have a simple angular snippet
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.age = "26";
$scope.height = "5.9";
$scope.gender = "M";
});
</script>
As you can see I have 4 variables declared in my myCtrl controller
$scope.name = "John Doe";
$scope.age = "26";
$scope.height = "5.9";
$scope.gender = "M";
Is there a way to programmatically list of all the declared $scope variables of a specific angular controller?
Why am I trying to do this ?
Sometimes, when you’re deep in 1000 lines of code in an angular controller, it will be very helpful to know what are the available variables to use at that specific moment. First, the benefit would be, so we don’t re-declare something that already been declared, and second, so we don't override an existing variable unintentionally. For those 2 reasons alone, that's why I am trying to list all the available $scope variables, especially the one that I declared in on that specific page, or in a specific controller of Angular.
NOTE : I am NOT looking to list all JS scope variables, but only looking for those one that I declared in Angular
I know exactly what you need and I use this lib extensively to show me my objects like Chrome does.
Angular json formatter
And the beauty is that it updates instantly with Angular magic. So you know the current state of your object at all times!
Simply drop this directive in your html and assign $scope to it.
The problem is that SecondName attribute is not updating when I input text in the field.
please look at this code at jsfiddle: http://jsfiddle.net/HEdJF/253/
HTML:
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<div>
<input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
<br>FirstName is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
</div>
<hr>
<div ng-controller="SecondCtrl as Second">
SecondName: {{Second.Data.SecondName}}<!-- How do I automatically updated it here? -->
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.service('Data', function(){
var obj;
return obj = { FirstName: '54',
SecondName: '22',
f: function(){
obj.FirstName = '1';
obj.SecondName = obj.FirstName;
}
};
});
myApp.controller('FirstCtrl', function( $scope, Data ){
Data.f();
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function( Data ){
Second = this;
Second.Data = Data;
});
It's not going to work like you think it should. This line:
obj.SecondName = obj.FirstName;
creates a new property SecondName equal by value to the FirstName. However since both properties are primitive types (String) there is no connection between them. In other words obj.SecondName does not reference obj.FirstName.
You have two options.
Option 1. (bad) Set up additional watcher on FirstName change, and once that happens update SecondName respectively
$scope.$watch('Data.FirstName', function() { Data.SecondName = Data.FirstName; });
http://jsfiddle.net/HEdJF/254/
Option 2. Don't introduce additional watchers and change your architecture. For example, use FirstName in the second controller too, since they are supposed to be equal.
http://jsfiddle.net/HEdJF/255/
This is a scoping issue because of your nested scopes. Take a look at this website for a clear explanation: http://toddmotto.com/digging-into-angulars-controller-as-syntax/. There's a few different solutions to solve your problem under the Nested Scopes section.
The problem with your code is that the First Controller is just changing the value of Data.FirstName object, hence the changes are not reflecting on your second controller because the value of SecondName does not change after it is initialized in the first controller. So you have to set your Data.SecondName
in your data as well.
Alternatively, you can do this.
<div>
<input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
<br>FirstName is : <strong>{{Data.SecondName=Data.FirstName}}</strong><!-- Successfully updates here -->
</div>
You can also use directives to achieve this functionality, but I guess you are just looking for the above solution.
Cheers!
I'm fairly new to Angular so if there is some incorrect thinking here, please let me know.
I'm trying to create two separate scope variables based on the same data set. I assumed that I would just be able to set them to different variables (as shown below) and it would work. I've found, however, that no matter what they are named or how they are defined (even in a directive!) that changing one changes them all.
So...what I expect/would like to see is that if I change the input in the top repeat it will only change the model for that repeat. Currently it changes all three.
Where am I going wrong here? I assume this has something to do with the two way data-binding. Thanks in advance!
Plnkr
HTML:
<h4>data</h4>
<div ng-repeat="person in data">
{{person.name}}
<input ng-model="person.name" />
</div>
{{data[0].name}}
<br>
<br>
<h4>testData</h4>
<div ng-repeat="person in testData">
{{person.name}}
<input ng-model="person.name" />
</div>
{{testData[0].name}}
<h4>Directive</h4>
<div tester data="data"></div>
Directive HTML:
<div ng-repeat="person in data">
{{person.name}}
<input ng-model="person.name" />
</div>
{{data[0].name}}
JS:
var app = angular.module('test', []);
(function () {
var testController = function ($scope) {
var data = [
{name:'Jordan', age:30},
{name:'Sean', age:32},
{name:'Seth', age:26}
];
$scope.data = data;
$scope.testData = data;
}
testController.$inject = ['$scope', '$http'];
app.controller('testController', testController);
}())
app.directive('tester', function(){
return {
restrict: 'A',
templateUrl: 'directive.html',
//If percent = true then that table should have a "percent change" th
scope:{
data: '=data'
}
}
})
I'm trying to create two separate scope variables based on the same
data set. I assumed that I would just be able to set them to different
variables (as shown below) and it would work
Actually both those javascript variables are pointing to the same data structure in memory. So when you modify this structure it reflects to both of them. Think of those data and testData variables as pointers to the same data.
You could copy this data structure in order to create 2 different instances of it in memory so that changes to one do not reflect to changes of the other:
$scope.data = data;
$scope.testData = angular.copy(data);
and if you wanted to reflect this in your directive, go ahead and clone the instance you are passing to it as well:
<div tester data="angular.copy(data)"></div>
Here both data and testData pointing to the same reference that why they are replicating same value.There are 2 solutions we can apply if there is function references, date object, and any undefined values which need to be there in the object after copy then appropriate option is $scope.testData = agular.copy(data);
Another options $scope.testData = JSON.parse(JSON.stringify(data)); but following keys won't be copyed.
functions.
Date object
properties with the value undefined
Trying to initialize text input box for user input but getting error. $scope can set intext when uncommentted. I've hacked around this (sort of) but I'm missing something basic as usual.
Console error starts: 'Error: $scope.intext is undefined' unless I assign a value. The input box is exclusively for user input. Also noticed I can assign 'why' and don't get the error until I try to split.
angular.module('myApp', [])
.controller('TextScreen', ['$scope', function($scope) {
//$scope.intext = "what";
var why = $scope.intext.split('-');
}]);
html
<div id="cont" ng-app="myApp">
<div ng-controller="TextScreen">
<input type="text" ng-model="intext" />
</div>
</div>
The reason is that $scope.intext is undefined. intext.
It is unclear what you are trying to do but I would suggest initializing intext or moving your code to a function. Like this:
$scope.change = function() {
var why = $scope.intext.split('-');
};
html
<input type="text" ng-model="intext" ng-change="change()" />
Like suggested in angular documentation here:
http://docs.angularjs.org/api/ng.directive:ngChange
Or try using ng-init
ng-init="intext= 'demo'"
Sample
<input type="text" ng-model="intext" ng-init="intext= 'demo'" />
O
The
var why = $scope.intext.split('-');
is being processed immediately, but at that moment, $scope.intext is undefined, therefore you cannot call .split on it.
If you are trying to act on the value the user enters, you should place a watch on it
$scope.$watch('intext', function(oldvalue, newvalue){
if(angular.isDefined(newvalue) && newvalue != oldvalue) //ensuring undefined should not processed
var why = newvalue.split('-');
});
UPDATE: angular 1.3.0-rc4 removed $scope.this see commit
Each instance of a $scope has a property named this that points back to itself.
Currently (1.2.0rc1) it's not prefixed with $(public/protected) or $$(internal) so it doesn't hint that it's an angular specific property.
What is the use case for it?
This question had me grepping all through the codebase for an explanation; I finally got a hint from an old test.
Since AngularJS expressions are evaluated in the context of a scope, the scope needs to have a property called this that refers to itself so that expressions that contain this work. Take the following example:
<div ng-controller="FirstController">
`this.num` (with normal scope): {{this.num}}
</div>
<div ng-controller="SecondController">
`this.num` (with scope.this removed): {{this.num}}
</div>
app = angular.module('myApp', []);
app.controller('FirstController', function($scope) {
$scope.num = 10;
});
app.controller('SecondController', function($scope) {
delete $scope['this'];
$scope.num = 10;
});
The second example does not work; see http://jsfiddle.net/BinaryMuse/mzbpz/ for a demonstration.