newbie question: How can i pass a value from my HTML back to the Controller code:
FOr example, I want to pass the value '1234' to my js code.
<div ng-app="Test">
<div ng-controller="myCntlr">
<div ng-model="myModel" value="1234">
{{outputVal}}
</div>
</div>
</div>
JS controller:
test.controller('myCntlr', function ($scope, $filter) {
// access the value '1234' here ?
});
Thanks!
Related
Im trying to validate my form, if the fields are valid then it should post the data to the DB if not prevent from posting the data to DB. when I submit the form Im getting an error TypeError: Cannot read property '$valid' of undefined, I don't know how to overcome it, need help in this.
html:
<form name="formvalidation">
<ion-view ng-controller="ValidationCheck">
<ion-content>
<div>
<strong>User:</strong> <br/>
<input ng-model="name" type="text" name="name" required/>
<ng-messages for="formvalidation.name.$error" ng-if="formvalidation.name.$invalid">
<div ng-messages-include="error/validation.html"></div>
<ng-messages>
</div>
</from>
<button ng-click="check()">
controller:
myApp.controller('ValidationCheck',function($scope, applicationService)
{
$scope.check=function(formvalidation){
var name={'name'=$scope.name};
$scope.submitted=true;
if(formvalidation.$valid){
applicationService.save(name,$scope.home);
}}});
Just change your if condition formvalidation.$valid to formvalidation
. because you already pass formvalidation.$valid in your function via ng-click
if(formvalidation){
...
...
...
}
Remove ng-click and add a ng-submit:
<form name="formvalidation" ng-submit="check()" novalidate>
Try this : ( controller before form )
<ion-view ng-controller="ValidationCheck">
<form name="formvalidation">
In your html you have:
<button ng-click="check(formvalidation.$valid)">
which calls the check function with either a true or false value (a boolean), depending on whether or not the form is valid.
In your controller you have the check function with the following if-statement:
if(formvalidation.$valid)
but formvalidation is a boolean (true or false)
I recommend removing the argument from check and simply access the formvalidation properties from the $scope variable.
so the html becomes
<button ng-click="check()">
and the controller becomes
$scope.check=function(){
var name={'name'=$scope.name};
$scope.submitted=true;
if($scope.formvalidation.$valid) {
applicationService.save(name,$scope.home);
}
}
<form> should come after controller declaration
<div ng-app="app">
<ion-view ng-controller="ValidationCheck">
<form name="formvalidation">
<ion-content>
var app = angular.module("app", []);
app.controller('ValidationCheck', function($scope) {
$scope.check = function(formvalidationBoolean) {
alert(formvalidationBoolean);
var name = {
'name': $scope.name
};
$scope.submitted = true;
if (formvalidationBoolean) {
//applicationService.save(name, $scope.home);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<ion-view ng-controller="ValidationCheck">
<form name="formvalidation">
<ion-content>
<div>
<strong>User:</strong>
<br/>
<input ng-model="name" type="text" name="name" required/>
<ng-messages for="formvalidation.name.$error" ng-if="formvalidation.name.$invalid">
<div ng-messages-include="templates/admin/validation.html"></div>
<ng-messages>
</div>
</from>
<button ng-click="check(formvalidation.$valid)">Submit</button>
</div>
You are sending boolean value "ng-click="check(formvalidation.$valid)", So your statement if(formvalidation.$valid){ inside controller is wrong.
And You need to change "=" to ":" in var name = {'name': $scope.name };
My question is best explained when I straight go to the code.
HTML part:
<div class="panel panel-default post" ng-repeat="post in posts">
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<a class="post-avatar thumbnail" href="/profile#/{[ post.profileID ]}">
<div class="text-center">{[ user.fullname ]}</div>
</a>
</div>
</div>
</div>
When I click on the /profile#/{[ post.profileID ]} link - it takes me to the profile page. All good here.
However, I am using ngView so I have separated it like this:
<div class="col-md-3">
<div>Some HTML stuff</div>
</div>
<div class="col-md-6">
<div ng-view></div>
</div>
<div class="col-md-3">
<div>Some HTML stuff</div>
</div>
My ngView makes use of the /profile#/{[ post.profileID ]} param and I use it to display whatever I have to display.
The problem:
I can get the profileID param in my angular controller but once I get it, how will I be able to pass it onto other controllers?
My controller looks like the below:
var profileApp = angular.module('profileApp', ['ngRoute']);
profileApp.config(function($routeProvider) {
$routeProvider
.when('/:id', {
templateUrl : 'partial/profile/feed.html',
controller : 'mainController'
})
.when('/posts:id', {
templateUrl : 'partial/profile/posts.html',
controller : 'postsController'
});
});
profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $routeParams){
console.log($routeParams.id);
}]);
profileApp.controller('postsController', ['$scope', '$routeParams', function($scope, $routeParams){
console.log($routeParams.id);
}]);
As you can see, I get get the param passed from the HTML link and use it in the mainController but how will I get the param to be a link in the col-md-3 (just like the original /profile#/{[ post.profileID ]})?
Hope this makes sense. It's has been driving me nuts!
Thanks
Why don't you just edit your partial HTML pages and put the columns in it.
For partial/profile/feed.html :
<div>
<div class="col-md-6">
<div>feed stuff</div>
</div>
<div class="col-md-3">
</div>
</div>
And partial/profile/posts.html could be :
<div>
<div class="col-md-6">
</div>
<div class="col-md-3">
<div>posts stuff</div>
</div>
</div>
So I did some research into this and I just ended up using services.
See below for the answer:
profileApp.service('globalParams', function() {
var profileID = '';
return {
getProfileID: function() {
return profileID;
},
setProfileID: function(value) {
profileID = value;
}
};
});
You then pass the service into the dependencies in the controllers, like below:
profileApp.controller('mainController', ['$scope', 'globalParams', function($scope, globalParams){
//some code
};
And you can call the functions for getting and setting the variables.
I am creating a forgot password function for an application I am building and so I built a function that sends an $http request to a PHP resource that sends the user a reset email. When the request resolves than I display a twitter bootstrp modal using an angular directive that tells the user if their email was successfully sent or not.
The issue I am having is that the scope of the controller and the directive seem different as updating the feedback in my controller does not update the output of the directive.
My controller:
angular
.module('enigma.auth')
.controller('Auth', Auth);
Auth.$inject = ['authFactory'];
function Auth(authFactory) {
var auth = this;
auth.forgotPassword = forgotPassword;
auth.forgotPasswordFeedback = '';
function forgotPassword(email) {
if(email) {
authFactory.forgotPassword({ email: email })
.then(function(res) {
auth.forgotPasswordFeedback = res.message; // auth.forgotPasswordFeedback is set to the correct value now, however this isn't reflected in the directive.
$('#forgotPassword').modal();
});
}
};
}
My directive:
angular
.module('enigma.forgotPasswordDirective', [])
.directive('forgotPasswordDirective', forgotPasswordDirective);
function forgotPasswordDirective() {
return {
bindToController: true, // I thought this told the directive to use the controllers scope instead of an isolated scope...
controller: 'Auth',
controllerAs: 'auth',
templateUrl: 'modules/auth/forgotPassword.html'
}
}
The template:
<div class='modal fade' id='forgotPassword'>
<div class='modal-dialog'>
<div class='modal-content'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<div class='row'>
<div class='col-xs-12'>
<h3>Password Recovery</h3>
<p>
{{auth.forgotPasswordFeedback}} <!-- this value is never updated :( -->
</p>
<p>
<button class='btn btn-primary' data-dismiss='modal'>Close</button>
</p>
</div>
</div>
</div>
</div>
</div>
Lastly I have this all included inside my registration template which is bound to the registration controller (Note: Don't the forgot password directive is bound to the auth controller), here's the relevant bits.
<div class='form-group'>
<label for='email'>Email:</label>
<input class='form-control' name='email' ng-model='reg.user.email' required type='email' ng-blur='reg.alreadyRegistered()' />
<div ng-messages='reg.regForm.email.$error' ng-if='reg.regForm.email.$dirty'>
<div class='error' ng-message='userExists'>This user already exists. <a href='#' ng-click='auth.forgotPassword(reg.user.email)' title='Forgot password' ng-controller='Auth as auth'>Forgot password?</a></div>
</div>
</div>
...
<forgot-password-directive></forgot-password-directive>
It works, for example, if you wrap the directive inside the controller:
<div ng-controller='Auth as auth'>
<div class='form-group'>
...
<a href='#' ng-click='auth.forgotPassword(reg.user.email)' title='Forgot password'>Forgot password?</a>
</div>
<forgot-password-directive></forgot-password-directive>
</div>
However, in addition, I would use a simpler approach and define the directive followingly:
function forgotPasswordDirective() {
return {
scope: false,
templateUrl: 'modules/auth/forgotPassword.html'
}
}
If you are familiar with Node, you may clone and run the example from here: https://github.com/masa67/NgBind.
I have an ionic & angular based project. I get variable node from a service. node's body value is HTML. But when I print {{node.body.und[0].value}} with ionic, it prints HTML codes with tags like <ul><li><strong>Title:</strong> some text</li><ul>
Controller and service part of the code:
.controller('NodeCtrl', function($scope, $stateParams, Node) {
$scope.node = Node.get({nid: $stateParams.nid});
});
.factory('Node', function ($resource) {
return $resource('some-domain.com/api/node/:nid'+'.json');
})
Ionic template:
<ion-view view-title="{{node.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h2>{{node.title}}</h2>
</div>
<div class="item item-body">
{{node.body.und[0].value}}
</div>
</div>
</ion-content>
</ion-view>
How can I make ionic print {{node.body.und[0].value}} as HTML instead of with HTML tags like <ul><li><strong>Title:</strong> some text</li><ul>?
All Credits to Will.Harris!!
ng-bind-html, is what you are looking for.
From the Docs, use the ng-bind-html in the view as:
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
and in the controller, assign the scope variable with the html content as:
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
}]);
I'm new to AngularJS. I've researched the theory behind ng-repeats but I cannot find any good examples of 2-way data binding or object creation for nested ng-repeats. I understand that the syntax has changed in recent versions. I'm using 1.1.5.
I have post objects that have a nested array of comment objects. I want to be able to add new comment objects to the array of comments in the post. I've tried lots of different versions.
This is my HTML:
<div id='posts' ng-controller="PostsCtrl">
<ul>
<div id='post' ng-repeat="post in posts track by post.id">
<div id='postMedia'>
<img ng-click="" ng-src={{post.attachment}} />
</div>
<div ng-click="">
<div ng-click="">{{post.message}}</div>
<div ng-click="">{{post.created_at}}</div>
</div>
<h1>Comments</h1>
<div id='comment' ng-repeat="comment in post.comments track by post.comment.id">
<div ng-click="">{{comment.body}}</div>
</div>
<form ng-submit="addComment()">
<input id="body" type="text" placeholder="Reply…" ng-model="post.comment.body">
<input type="submit" value="Add">
</form>
</div>
</ul>
</div>
This is the controller:
myApp.controller('PostsCtrl', ['$scope', 'angularFire',
function MyCtrl($scope, angularFire) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts', {});
$scope.commentProp = 'comments';
$scope.addComment = function() {
$scope.comments.push($scope.newcomment);
}
}
]);
SOLUTION:
Thanks to Chandermani answer for solving this. I modified the controller slightly because I wanted the to use a key called body in the data store -
myApp.controller('PostsCtrl', ['$scope', 'angularFire',
function MyCtrl($scope, angularFire) {
var url = 'https://inviter-dev.firebaseio.com/posts';
$scope.items = angularFire(url, $scope, 'posts', [] );
$scope.addComment = function(post,comment) {
post.comments.push({body:comment});
}
}
]);
The problem with you addComment method is that it does not know which post it needs to add comment to. Also the comment input that is part of you ng-repeat for comments can have a independent model which can be passed to the controller method.
You need to make the following changes. In html
<form ng-submit="addComment(post,commentData)">
<input id="body" type="text" placeholder="Reply…" ng-model="commentData">
<input type="submit" value="Add">
</form>
In your controller
$scope.addComment = function(post,comment) {
post.comments.push(comment);
}