Following this video tutorial, I am trying to bind three text inputs together.
But only the first get updated.
Here is my JsFiddle attempt
the index.html relevant part :
<body ng-app="">
<input type="text" placeholder="Your text" ng-model="data.message"></input>
<h2>{{data.message}}</h2>
<div ng-controller="FirstController">
<input type="text" placeholder="Your text" ng-model="data.message"></input>
<h2>{{data.message}}</h2>
</div>
<div ng-controller="SecondController">
<input type="text" placeholder="Your text" ng-model="data.message"></input>
<h2>{{data.message}}</h2>
</div>
</body>
script.js
function FirstController($scope){
}
function SecondController($scope){
}
What did I miss ?
Please also notice, that I do need the nested div tags and controller, as the purpose is to use scope inheritance.
Also, these global function definitions for the controllers are a choice, as I wanted to keep the video author method for now, in my real projects I will use the best practise which consist of using a module var controller() method).
Related
I have used the following code segment where I wanted to change the value of the input box when it is loaded, but it didn't work
test.template.html
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
getColor function is written in the controller where the color is decided according to the value given.
Could soomeone help me to solve this issue ? Thanks inadvance
The above code is correctly work when the relevant css classes are set into the input box as follows.
<span class="color">
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
</span>
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
The above code will fine. But if the ng-app="" directive if moved to form element then it won't work. Any idea why is this. Why the form element will not take ng-app directive and bootstrap the application.
// This will not work
<div>
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
Thanks
Ideally ng-app should be at root level. but in your code, some part is outside the ng-app which angular don't take care of
e.g.the h1 tag
you may write it within the form element or take ng-app to the root level
<div>
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
<h1>You entered: {{firstname}}</h1>
</form>
</div>
It will work, the problem with that the scope of the app. You defined ng-app on <form ng-app=""> so the scope is limited only to the start to end of the tag. Now you placed <h1>You entered: {{firstname}}</h1> outside the boundaries of ng-app so it won't work.
Check the working plnkr - http://plnkr.co/edit/zaTdGCouFrAXJywUSpcl?p=preview
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
<h1>You entered: {{firstname}}</h1>
</form>
From the docs for ng-app:
Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is
typically placed near the root element of the page - e.g. on the
or tags.
In this code, the ng-app directive is at top level and the angular expression {{firstname}} will take its value from the model.
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
In this code, the angular expression {{firstname}} can't resolve to its model since it lies out of the angular ng-app. Thus it acts simply as plain text.
<div>
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
ng-app is directive which is use to initialize the application
so mostly it is used on <body> tag or main tag of application
Like :-
<body ng-app="myApp"></body>
OR
<div ng-app="myApp">
<form>
// add other elements
</form>
</div>
So this type of directive is not applicable for child elements, even if you apply it will not work because by doing this app will not consider parent element so obviously child element also will not worked
In your case if you are using <form> tag on top level then you can use it like :-
<body>
<form ng-app="myApp">
</form>
</body>
I have the following
<form id="myForm" class="form-inline" >
<div class="container-fluid ">
<input ng-class="{'requiredError':programNameError}" name="first" ng-model="ProgramDetail.ProgramName" placeholder="Name" class="form-control input-xs" type="text" style="width:70%" />
</div>
</form>
This page is being called by the ngRoute when I navigate to a specific route and I specify the controller in the route configuration, buen when I try to access the $scope.myForm i get undefined.
Am I missing something here?
Give the form a name attribute to expose it on the $scope
<form id="myForm" name="myForm" class="form-inline" >
</form>
From the docs:
If the name attribute is specified, the form controller is published
onto the current scope under this name.
Argh, not enough reputation to write a comment, so writing as an answer.. :(
try defining the attribute name for the form.. I have a similar case and it worked only with this..
<form id="myForm" class="form-inline" name="myForm">
</form>
I am currently facing the following problem:
I would like to validate my form input using the Angular ngModel directives.
When using those together with $scope they work fine.
Now, working with the controllerAs syntax, they fail to work.
This problem is poorly documented, the only help I could find is this article.
Here is a small example of my code:
The template gets called with myController as vm
<form name="vm.signUpForm" ng-submit="vm.signup(vm.user)">
<label for="name">Name</label>
<input type="text"
class="form-control"
id="name"
name="name"
placeholder="Full name"
ng-model="vm.user.name"
ng-minlength="2" required />
<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<span ng-show="vm.signUpForm.name.$error.required">Please fill in your name</span>
<span ng-show="vm.signUpForm.name.$error.minlength">A minimum of 2 [...]</span>
</div>
[...]
</form>
Am I forced to use $scope to validate the form? Or did I miss something ?
Thanks in advance!
Solution by: Andrew Gray
I had to change the following lines to get this to work:
<form name="vm.signUpForm" ... >
<!-- To -->
<form name="signUpForm" ...>
<div ng-show="vm.signUpForm.$submitted || vm.signUpForm.name.$touched">
<!-- To -->
<div ng-if="signUpForm.name.$invalid">
<span ng-show="vm.signUpForm.name.$error.required" ... >
<!-- To -->
<span ng-show="signUpForm.name.$error.required" ... >
First things first - you don't need the vm. on the form.
<form novalidate name="someForm">
<label>
Some Text:
<span class="danger-text" ng-if="someForm.someText.$invalid">
ERROR!
</span>
</label>
<input type="text" name="someField" />
</form>
The way it winds up working, is that there's a validation object that is not tied to the scope. The controllerAs syntax is just spinning off a instance of the controller as a scope variable.
Try shaving off the vm. from the form and child elements' names, and you should be OK.
I am using angularjs for one of the my module in application. I want to update UI of various locations on page, so that all ui components will work synchronously as the model value changes.
here is my html-
<fieldset ng-controller="controller1" >
<legend>Divs with common controller</legend>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
</div>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
</div>
</fieldset>
<fieldset ng-controller="controller1" >
<legend>Divs with common controller</legend>
<div style="background-color:#eee;padding:3px;" ng-controller="controller2">
<input type="text" ng-model="Model1" />
<input type="text" ng-model="Model2" />
</div>
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
</div>
</fieldset>
and my javascript -
var testApp = angular.module('testApp',[]);
var mainApp = angular.module('mainApp',['testApp']);
testApp.controller("controller1",['$scope',function($scope){
$scope.Model1 = "testText";
}]);
testApp.controller("controller2",['$scope',function($scope){
$scope.Model2 = "testText2";
}]);
angular.bootstrap(document, ['mainApp']);
In the html for first fieldset it is working properly. But in second fieldset it is not. So can anyone please tell me how do i achieve the functionality of first fieldset in second fieldset.
Thanks.
use $rootScope instead of $scope
Can you use ng-controller="controller2" to particular input.
Try this
<div style="background-color:#eee;padding:3px;">
<input type="text" ng-model="Model1" />
<input type="text" ng-model="Model2" ng-controller="controller2" />
</div>
It doesn't work because you create 2 seperate scopes/instances for controller1
<div>
// Root scope
<div ng-controller="controller1">
// Child scope A
// scope = new controller1();
</div>
<div ng-controller="controller1">
// Child scope B
// scope = new controller1();
</div>
</div>
You can solve this problem by using the $rootScope directly or by creating a service. The recommended way is to avoid $rootScope whenever possible and use a service instead.
Value is probably the easiest way to create a service. Note that you can also use .service or .factory. Read more in the documentation about services.
testApp.value('myValue', {
data: 'testText'
});
I'm using an object here so we can use this as a reference to the value, this is important for sharing data between controllers. If you want to know why then read more about reference & value types.
Now inject this service into your controller and use this data instead:
testApp.controller("controller1",['$scope', 'myValue',function($scope, myValue){
$scope.Model1 = myValue;
}]);
On the view we need to update the bindings to the reference of the service:
<input type="text" ng-model="Model1.data" />
JSFIDDLE
USE THE DOT! ng-model without "." is bad.
Please read this
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
The issue is fully described there.