Can I use ng-model to build up an object over several views?
For instance, say in view1 I have
<input ng-model='myObject.firstName'>
And in view2 I have
<input ng-model='myObject.lastName'>
And in view3 I have
<input ng-model='myObject.email'>
The idea being you could hit a submit button in the last view, and return the object somewhere.
My initial approach to this is to have a service which declares an empty object, then have functions in the service which allow the controllers using the service to add their view input to that object, then return the object.
However I feel like this is quite a roundabout way of doing it!
If anyone could point me in the right direction I would really appreciate it.
You can use a service for that. Here an example with 3 controllers sharing the same object using 3 directives ng-model. Each controller modify the tested.value property, but you can use differents properties of course.
angular.module('test', []).factory('tested', function() {
return {
value : '123'
};
}).controller('ctrl1', function($scope, tested) {
$scope.tested = tested;
}).controller('ctrl2', function($scope, tested) {
$scope.tested = tested;
}).controller('ctrl3', function($scope, tested) {
$scope.tested = tested;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="ctrl1">
<input type="text" ng-model="tested.value" />
{{ tested.value }}
</div>
<div ng-controller="ctrl2">
<input type="text" ng-model="tested.value" />
{{ tested.value }}
</div>
<div ng-controller="ctrl3">
<input type="text" ng-model="tested.value" />
{{ tested.value }}
</div>
</div>
Since each view has its controller, the only way to share data is with a service of type "provider", "service" or "factory".
You could then modify your object from each controller with the methods you talk about.
In the end, to notify each view something changed, the service methods could raise an event from the service :
$rootScope.$broadcast('somethingChanged', myObject);
And each controller could listen with:
$scope.$on('somethingChanged', function(data) {
});
Related
I have many elements in my HTML code that have their ngModel assignment defined as ng-model = "object.[something]".
For example:
<div class="form-group row" ng-model="object.askUser">
I do this to be clear of my purpose for these elements. My question is how do I access these element in my Javascript? Do I call $scope.object.askUser, $object.askUser, or something else? I had a hard time finding things on the web about this, most likely because I wasn't quite sure of the words to use in the search bar to describe what I am trying to do.
Inside your controller use $scope.object.askUser:
var app = angular.module('TestApp', []);
app.controller("testCtrl", function ($scope) {
$scope.someObject = {};
$scope.someObject.askUser = "Hello, world!";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="TestApp">
<div ng-controller="testCtrl">
<input ng-model="someObject.askUser" />
</div>
</div>
Side note:
You use in your example <div> with ngModel.
ngModel Docs:
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope
If you want to one-way bind a model to a div use Angular Expression:
<div class="form-group row">
{{ object.askUser }}
</div>
I have got a form where user will enter a name and click Next. What I want to do is that, when the user clicks Next, I want to alert the updated value of $scope.name inside toChat function, but initial value is alerted, which is James. How can I access the updated value inside angular function? I have some serious problems understanding sharing variables within AngularJs.
js
.controller('NewcontactCtrl', function($scope,$rootScope, $ionicHistory,$window) {
$scope.name='James';
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
$scope.toChat = function() {
alert($scope.name);
};
})
html
<ion-view view-title="New contact">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="primary">
<button class="button" ng-click="myGoBack()">
Cancel
</button>
</ion-nav-buttons>
<ion-nav-buttons side="secondary">
<button class="button" ng-click="toChat()" >
Next
</button>
</ion-nav-buttons>
<ion-content scroll="false" has-header="false" padding="true" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="name" />
</label>
<label class="item item-input">
<textarea placeholder="Notes" ng-model="notes" rows="10"></textarea>
</label>
</div>
</ion-content>
</ion-view>
Can anyone help ?
Please see: https://github.com/angular/angular.js/wiki/Understanding-Scopes
The most relevant part in the above:
Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. ...
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.
Having a '.' in your models will ensure that prototypal inheritance is in play. So, use
<input type="text" ng-model="someObj.prop1"> rather than
<input type="text" ng-model="prop1">.
I believe you have a directive in there somewhere (probably ion-content) that is creating a new scope where your input field is, separated from the scope where your Next button is.
To simulate this, I've used ng-repeat in the below snippet (but I'm repeating only once), which causes the same behaviour of splitting the scopes. If you were to use your controller code unmodified with this html, you'd reproduce the issue you're experiencing.
The solution around this is to 'use a dot (.)' when binding. Notice that I've wrapped the name within an object called 'data' on the scope, so now you refer to this as data.name instead of just name.
(function() {
'use strict';
angular.module('myApp', [])
.controller('NewcontactCtrl', function($scope, $window) {
$scope.repeaterTest = [1];
$scope.data = {name: 'James'};
$scope.toChat = function() {
$window.alert($scope.data.name);
};
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="NewcontactCtrl">
<label ng-repeat="test in repeaterTest">
<input type="text" placeholder="Name" ng-model="data.name" />
</label>
<button class="button" ng-click="toChat()">
Next
</button>
</div>
</div>
I think you need to alert something similar to...
alert($scope.name)
Addition to #Paul Fitzgerald, points, ensure that ng-controller="NewcontactCtrl" is included at the top scope in HTML DOM.
try adding a service in order to share data within scopes
.controller('NewcontactCtrl', function($scope,$rootScope,sharedData $ionicHistory,$window) {
$scope.name=sharedData.Name ;
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
$scope.toChat = function() {
alert(sharedData.Name);
};
});
app.factory('sharedData', [function () {
var self = {};
self.Name = "James";
return self;
}]);
I have a multiple page (view) sign up form and on view 3 I have an input with an ng-pattern to evaualte a postal/zip code. The problem is when I switch views and then revisit the view with the ng-pattern the input becomes invalid.
<input type="text" class="form-control" name="postal" ng-model="user.postal" ng-minlength="1" ng-maxlength="8" maxlength="8" ng-pattern="/(^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJKLMNPRSTVWXYZ]( )?\d[ABCEGHJKLMNPRSTVWXYZ]\d$)|(^\d{5}(-\d{4})?$)/gmi" required>
Any ideas on why this becomes invalid?
Here's a snippet of working code that maintains a valid zip code, and user name, when switching between views. I changed your pattern string to make it work for me, but yours might be fine. I just wanted something simpler to test with. The pattern matches xxxxx | xxxxx-xxxx .
The user object is displayed on each view.
The Zip code only shows when it's valid.
If you're using ngView, I found it easiest to nest inside a controller, and remove the controller option from the route configuration. When ngview is updated, it looks like a new controller is instantiated, and you get a new scope. Your previous input would be lost, and well, not be valid :)
var testApp = angular.module("testApp", ['ngRoute']);
testApp.config(['$routeProvider',
function($routeProvider) {
//Every View here shares the same controller. ng-view will give you a new controller if you pass it in.
$routeProvider.when("/view1", {
//Use TemplateURL instead to reference an extrnal page
template: '<h2> view 1 </h2><br/>Zip: <input type="text" class="form-control" name="postal" ng-model="user.postal" ng-pattern="/^\\d{5}$|^\\d{5}-\\d{4}$/" ng-required="!user.postal" /><br/>{{user}}'
//controller: testCtrl * Maybe this is your issue. *
})
.when("/view2", {
//Use TemplateURL instead to reference an extrnal page
template: '<h2> view 2 </h2>Name: <input type="text" class="form-control" name="uname" ng-model="user.name" required /> <br /> {{user}}'
});
}
]);
testApp.controller("testCtrl", function($scope, $http) {
$scope.user = {};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.js">
</script>
<div ng-app="testApp">
<div ng-controller="testCtrl">
View 1
<br/>
View 2
<ng-view></ng-view>
</div>
</div>
I was wondering :
Just as without using controller as syntax , I'd have to do :
<body ng-controller="ParentCtrl">
<input ng-model="name" /> {{name}}
<div ng-controller="ChildCtrl">
<input ng-model="name" /> {{name}} - {{$parent.name}}
</div>
</body>
And now with the Controller as syntax , I can do :
<body ng-controller="ParentCtrl as parent">
<input ng-model="parent.name" /> {{parent.name}}
<div ng-controller="ChildCtrl as child">
<input ng-model="child.name" /> {{child.name}} - {{parent.name}}
</div>
</body>
Which is great , but what about the controller itself ?
With the first example , I could do :
....controller('Controller', function($scope) {
// do something with $parent.$scope...
But now , after using this :
....controller('Controller', function() {
//this.mySomething....
Question :
How would I reference the parent ? ( in the alias way!)
I mean , NG come here to help us by using aliases to scope via parent && child ,
But is there any representation to that "help" in the controller ?
No, there isn't.
The goal of the Controller as ... was to make dealing with models more natural, and to remove all of the mess of dealing with $scope, except when needed.
Models don't really have $parents.
$scope has a parent-$scope.
But if I have a parent Controller as "Bike" and a nested controller "Doorknob"...
Doorknob might have .turn() and .type and .locked, but it doesn't have a "Bike", any more than all "Bike"s have "Doorknobs".
You still have direct-access to the $scope in the controller, so you can add your own inheritance, and build your own links -- you can also still reference other $scope properties in your view...
The two way binding in AngularJs is great in updating the view anytime the model changes. I was wondering if there was some way to pass the model to a function defined in the controller before being displayed. And not with a button click but live.
So for example, the p element would be updated automatically
<input data-ng-model='myModel'>
<p>{{myModel}}</p>
Is there any way to do the following?
<div data-ng-controller='myController'>
<input data-ng-model='myModel'>
<p>{{increment(myModel)}}</p>
</div>
where increment is a function defined in myController
Most definitely you can. Just define the function in the same controller. For instance
Controller:
app.controller('myCtrl', function($scope) {
$scope.increment = function() {
return $scope.myModel;
}
});
HTML
<div data-ng-controller='myController'>
<input data-ng-model='myModel'>
<p>{{increment()}}</p>
</div>
That returns the exact same thing as {{myModel}}