I have the following Form which I am including in the main app through ng-view
Form Snippet
<form action = "#" method="post" class="form-horizontal" id="commentForm" role="form">
<div class="form-group">
<div class="col-sm-10">
<textarea class="form-control" type="text" ng-model="userComment" placeholder="New Discussion Topic" rows="5"></textarea>
</div>
</div>
<div class="form-group" id="div_submitComment">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn" type="button" id="submitComment" ng-click="vm.addComment()">Submit comment</button>
</div>
</div>
</form>
Upon clicking the submit button, the controller function will be called. In the controller function, I am not able to access the variable $scope.userComment
Controller Snippet
(function () {
'use strict';
angular
.module('app')
.controller('DiscussionBoardController', DiscussionBoardController);
DiscussionBoardController.$inject = ['UserService', '$rootScope', '$scope', '$cookieStore', 'AuthenticationService'];
function DiscussionBoardController(UserService, $rootScope, $scope, $cookieStore, AuthenticationService) {
function addComment() {
$.getJSON(
"http://localhost/DBoardPage/server/discussion-board/postComment.php", // The server URL
{ userName: $scope.currentUser , userComment:$scope.userComment , commentID:0 }, // Data you want to pass to the server.
$scope.addCommentResponse // The function to call on completion.
);
};
/*End - Discussion Board related Functions*/
}
})();
Though I know that a child scope will be created when we use ng-include, ng-view and ng-repeat, I am not getting an example to explain the usage.
Please let me know how I can get around this preoblem
Are you sure it isn't $scope.currentUser that doesn't exist? You are using a variable that isn't declared.
Try adding:
$scope.currentUser = "";
$scope.userComment = "";
Since you are using AngularJS it might be a better idea creating your function the Angular way.
$scope.addComment = function(){....
If it still doesn't work show more of your setup.
Related
I have the following Angular code
controller:
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.job = null;
vm.create = function (job) {
vm.job = job;
}
});
HTML:
<div ng-controller="MainCtrl as vm">
<span data-ng-bind="vm.job.position"></span>
<form name="form" data-ng-submit="vm.create(vm.job)">
<label for="position">Position</label>
<input id="position" name="vm.job.position" type="text" data-ng-model="vm.job.position" />
<button>Create</button>
</form>
</div>
But when I submit the form I don't see the Position value.
Any idea why?
Because
You forgot to add ng-app to the body or html element
You're using angular 1.0.8, which is completely obsolete, and doesn't support controller as.
Note that you don't even need to submit, since the job you're binding is already vm.job. Your create(vm.job) method call does nothing: it assigns vm.job to vm.job.
So this is how my index.html is structured.
<html ng-app='information'>
<body ng-controller="FirstController as first>
<div ng-controller="SecondController as second>
<div id="information">
<myOwnDirective ng-controller="ThirdController as thirdCtrl"></myOwnDirective>
</div>
This is my custom directive.
(function() {
var app = angular.module('information', ['ui.bootstrap']);
app.directive('myOwnDirective', function(){
return {
restrict: 'E',
templateUrl: 'my-own-directive.html',
};
});
This is a custom directive template. my-own-directive.html
<uib-accordion tag ng-repeat="info in first">
<form ng-submit="thirdCtrl.updateInformation()">
<div class="form-group">
<label for="someprop">Property</label> <input type="text" name="someprop"
class="form-control" ng-model="info.propValue"
ng-readonly="info.propValue">
</div>
<button type="submit" class="btn btn-success btn-lg btn-block">Click</button>
</form>
This is my script file: myScript.js
(function() {
angular.module('information').controller('ThirdController', [ '$scope', function($scope) {
console.log("In third controller"); // This prints
this.updateInformation = function() {
console.log("Inside updateInformation");
console.log("Inside scope is: "+ $scope) // It is undefined
};
}]);
})();
What I want to get is get value of info.propValue from the scope but I cant seem to get it. It always shows up as undefined. I have a very long form whose contents I want to read but I cant seem to get the values. Once I have them I will bemaking an Ajax call using $http. Also, if I try to invoke function updateInformation() by doing $scope.updateInformation(), it doesnt invoke, but it does get called if I do this.updateInformation(). Why ?? What am I missing or what am I doing wrong? Any help is appreciated. Have been stuck on it for quite a while. Thank you.
I'm trying to add a mongoose object to another mongoose object using a select bar in a form. All the other key,value pairs insert correctly, even the checkbox bool, but the select-option combo won't save the I've done this before with no problem, but in ionic, it doesn't seem to want to work. Is there a work around or am I just messing something up in the code?
$scope.addProperty = function(prop){
console.log(prop);
Props.add(prop)
.then(function(res) {
console.log(res.data);
//window.location.reload();
})
.catch(function(error){
console.log(error);
});
};
<form method = "post" class="form-inline" role="form" action = "localhost:3000/managers/newApt">
<div class="form-group">
<label class="sr-only" >Tenants:</label>
<select ng-model="prop.tenants" class="column medium-3" ng-options="manager.name for manager in allManagers"> </select>
</div>
<div class="form-group">
<label class="sr-only">Address</label>
<input type="text" class="form-control" ng-model='prop.address'>
</div>
<button type="submit" class="btn btn-default" ng-click='addProperty(prop)'>Add Property</button>
</form>
try to use this video tutorial they use var controllerName = this, inside controller and reference methods and properties of the controller through var controllerName, for example this is a controller:
angular
.module('your-app-module')
.controller('ExampleController', function ($scope, $state) {
//This var is to bind methods and vars in view(html) to this specific controller
var ExmpleCtrl = this; //this is the var that is going to replace $scope
//NOTICE no $scope but rather ExmpleCtrl
ExmpleCtrl.goToState = function (state) {
$state.go(state);
};
});
Now in your html try:
<ion-view ng-controller="ExampleController as exmpleCtrl">
<ion-content>
<!-- notice how I use exmpleCtrl instead of $scope to access controller or to pass info -->
<div ng-click="exmpleCtrl.doSomething()">
</ion-view>
If you still have doubt check this short video (ignore it's for webstorm the way they bind the controller to the a variable inside controller referenced to this is what is useful): http://blog.jetbrains.com/webstorm/2014/03/angularjs-workflow-in-webstorm/
I do not know why when I click on Submit button $scope.result get the value (printed out by console.log) but it do not print out any thing by {{result}} in the template while {{countDown}} is still work ok. How to fix it?, thanks
SCRIPT:
angular.module('mean.system').controller('HeaderController', ['$scope', 'Global', $timeout', '$http', '$location', function ($scope, Global, $timeout, $http, $location) {
$scope.findFriend = function() {
$scope.result = "submit button is clicked";
console.log($scope.result); //submit button is clicked
}
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
}, 1000);
}]);
HTML:
<div data-ng-controller="HeaderController">
<div> {{countDown}} </div>
<form ng-submit="findFriend()">
<input type="email" ng-model="friendEmail">
<input type="submit" value="Find">
</form>
</div>
<section data-ng-controller="HeaderController">
<div> Confirm: {{result}} </div>
<div> {{countDown}} </div>
</section>
Here's your problem, other then the previous comment that you were using two controllers, but also, by having your outside of your initial that has the controller on it, then that's outside of the scope.
What you want to do is put the inside the . Here's how it should look along with a fiddle that shows this working for you.
<div ng-controller="MyCtrl">
<div>{{countDown}}</div>
<form ng-submit="findFriend()">
<input type="text" ng-model="friendEmail" />
<input type="submit" value="Find" />
</form>
<div>Confirm: {{result}}</div>
<div>{{countDown}}</div>
</div>
http://jsfiddle.net/HB7LU/1792/
And to be detail oriented, make sure to self close your tags, it's better formed HTML.
To be able to pass variables between different controllers, you can do it using a service as mentioned in the comment, this is a good simple example:
https://gist.github.com/exclsr/3595424
Cheers.
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);
}