I have 2 directives that are on the same level as follows:
function signUpForm(djangoAuth, Validate){
return{
restrict:'A',
controller:["$rootScope","$scope",function($rootScope, $scope){
$scope.submitFunction = function(formData){
//do stuff
}
}]
}}
function signInForm(djangoAuth, Validate){
return{
restrict:'A',
controller:["$rootScope","$scope",function($rootScope, $scope){
$scope.submitFunction = function(formData){
//do stuff
}
}]
}}
My HTML is as follows:
<div>
<div class="email_log_container">
<form name="signup_form" class="signup_form" sign-up-form
novalidate ng-submit="submitFunction(signup_form)">
<input type="submit" name="submit" value="Submit" >
</form>
</div>
<div class="email_log_container">
<form name="signin_form" class="signin_form" sign-in-form
novalidate ng-submit="submitFunction(signin_form)">
<input type="submit" name="submit" value="Submit" >
</form>
</div>
</div>
The problem is that when I click the submit button on the second form, it actually submits the first form which results in errors. So I went on to add isolate scopes to the directives, now what happens is that the functions and attributes attached to $scope in the controller are not being picked up now. For example ng-submit does not know about the submitFunction within the controller.
Can anyone help me with ideas on how to stop these two directives from interfering with each other?
While you are using a controller but no template for your directive this will not work. Try it like in this runnable demo fiddle and add the form as a template into your directive. In that way you will be able to handle all the $scope goodness in your directive controller itself. The template itself will be compiled and uses the directive controller.
View
<div ng-controller="MyCtrl">
<div class="email_log_container">
<sign-in-form></sign-in-form>
</div>
</div>
AngularJS application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
});
myApp.directive('signInForm', function signInForm(){
return{
restrict:'E',
replace: true,
template: '<form name="signin_form" class="signin_form" sign-in-form novalidate ng-submit="submitFunction(signin_form)"><input type="submit" name="submit" value="Submit" ></form>',
controller:["$rootScope","$scope",function($rootScope, $scope){
$scope.submitFunction = function(formData){
//do stuff
console.log('sdfsdfd');
}
}]
}});
Related
i am appending given below html form returned from server side in response of ajax call
<div ng-app="submitExample" >
<form action="shan" ng-submit="submit()" ng-controller="ExampleController" id="account_info_modal">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
</div>
here angular js directive are not working when appending form using ajax but when form is on page then angular js code working properly my angular js script is given below
(function() {
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.submit = function() {
alert("hello submit");
};
}]);
})();
give below function i am using to append html form
function show_account_info_modal(param)
{
var id=$(".jstree-clicked").parent().attr('id');
var name=$(param).attr('name');
$.ajax({
type: 'get',
url: '<?= admin_url('Chart_of_accounts/get_account_info_modal'); ?>',
data: { account_id:id,name:name },
success: function (data)
{
$("#account_info_modal").html(data)
}
});
}
You need to use $compile service when appending element.
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
As per your code use
$("#account_info_modal").html($compile(data)($scope))
Here is an example
(function(angular) {
'use strict';
angular.module('myApp', [])
.controller('Controller', ['$scope', '$compile',
function($scope, $compile) {
$scope.click = function() {
console.log($scope.text)
}
//Append element dynamically
var html = $compile('<input type="text" ng-model="text" name="text" /><button type="button" ng-click="click()">Click Me</button>')($scope);
angular.element(document.querySelector('#x')).append(html);
}
]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
<div id="x">
</div>
</div>
</div>
I have a checkbox inside ng-form rapped by HTML5 form that I want to exclude so it won't change my form $state($pristine or $dirty).
I have tried using ignoreDirty directive - Angular 1.2: Is it possible to exclude an input on form dirty checking?
and some other solutions and none work for ng-form inside HTML5 form, some example code:
<form name="mainForm" class="col-xs-10 form-validation" novalidate>
<ng-form name="innerForm">
<div>
<span>check my
<span ng-if="vm.utils.mode!=='readonly'">
<input type="checkbox"
ng-model="vm.utils.amalotSecond"
class="secondYearCheckBox">
</span>
</span>
</div>
</ng-form>
<form>
The ignoreDirty directive you provided works fine like in this demo fiddle. The following code example was taken from angular-1-2-is-it-possible-to-exclude-an-input-on-form-dirty-checking. Also try to avoid using nested forms which are not HTML conform. An form element can't have an element form. It will cause problems and errors e.g. the one you are currently facing.
View
<div ng-controller="MyCtrl">
<form name="test">
Watching dirty: <input ng-model="name" /><br />
Ignoring dirty: <select ng-model="gender" ignore-dirty>
<option>male</option>
<option>female</option>
</select><br />
dirty: {{test.$dirty}}
</form>
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = 'Superhero';
});
myApp.directive('ignoreDirty', [function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$setPristine = function() {};
ctrl.$pristine = false;
}
}
}]);
This seems like a really simple question but, for whatever reason my submit() method is not being invoked in JS.
HTML:
<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9">
<ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false">
<form id="register-form4" ng-submit="register()" class="list">
<ion-list id="register-list4">
<label class="item item-input" id="register-input7">
<input type="text" ng-model="registration.email" placeholder="Email" required>
</label>
<label class="item item-input" id="register-input9">
<input type="password" ng-model="registration.password" placeholder="Password" required>
</label>
</ion-list>
</form>
<a id="register-button7" ng-click="document.getElementById('register-form4').submit();" class="button button-positive button-block">Create Account</a>
<a ui-sref="login" id="register-button8" class="button button-positive button-block button-clear">Back</a>
<div ng-show="isError">{{ loginError }}</div>
</ion-content>
</ion-view>
Controller:
.controller('registerCtrl', ['$scope', '$stateParams', "$firebaseAuth", "$location",
function ($scope, $stateParams, $firebaseAuth, $location) {
$scope.register = function() {
var email = $scope.registration.email,
password = $scope.registration.password,
confirmPassword = $scope.registration.confirmPassword;
console.log("Being submitted");
}
}])
I cannot change the <a> tag even though it would be easier just to have a form submit input but the HTML is auto-generated by Ionic Creator and I can't mess it up.
EDIT: The reason I want to submit the form in this way and not just trigger register() on click of the button is that I want to trigger the HTML required's in the form so that checks the fields have been entered so I don't have to do it manually
EDIT 2: I have changed the <a> tag to a submit button. However, this is still not invoking the register() method which suggests the form is not being submitted:
<input type="submit" value="Create Account" id="register-button7" class="button button-positive button-block">
Looking at these docs, it should work as it's pretty much the same format
I have read that 1 user things that the standard HTML submit and ng-submit do not work together. Anyone know if this is true?
You can use html input of type submit or a button inside your form. Here is a working demo at JSFiddle: https://jsfiddle.net/ydbhb5dL/
Controller:
angular
.module('App', [])
.controller('ExampleController', function ($scope) {
$scope.registration = {};
$scope.register = function () {
var email = $scope.registration.email,
password = $scope.registration.password;
console.log('Email:', email);
console.log('Password:', password);
console.log('Being submitted!');
};
});
Html:
<div ng-app="App" ng-controller="ExampleController">
<ion-view title="Register" hide-nav-bar="true" nav-transition="none" id="page9">
<ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false">
<form id="register-form4" ng-submit="register()" class="list">
<ion-list id="register-list4">
<label class="item item-input" id="register-input7">
<input type="text" ng-model="registration.email" placeholder="Email" required>
</label>
<label class="item item-input" id="register-input9">
<input type="password" ng-model="registration.password" placeholder="Password" required>
</label>
</ion-list>
<input type="submit" class="button-like-link" value="Create Account (button)">
</form>
</ion-content>
</ion-view>
</div>
To solve your problem change the <a> element that submits the form to
<a id="register-button7" ng-click="register()" class="button button-positive button-block">Create Account</a>
The reason ngClick wasn't working before is because it was looking at $scope for document, which is not defined. You could add the following line to your controller, but it's not necessary.
$scope.document = document;
If you insist on not changing the form structure, you can create a new directive for your submit "button" similar to the one below (untested).
angular.module('moduleName').directive('submitForm', function() {
return {
restrict: 'A',
scope: {
formId: '='
},
link: function($scope, $elem) {
$elem.on('click', function() {
document.getElementById($scope.formId).submit();
});
}
};
});
Which you would then use as follows:
<a id="register-button7" submit-form form-id="register-form4" class="button button-positive button-block">Create Account</a>
If you still don't want to change the <a> tag to use the new directive, your only other option is defining $scope.document = document.
Or, as #J Orbe mentioned, you could use onclick instead of relying on an Angular directive (i.e. ngClick and submitForm). I'm not sure this qualifies as the "Angular way" TM, though, and you may want to avoid mixing Angular and regular JavaScript attributes as it can result in confusion. Typically, if you're using Angular, you should try to solve things using Angular.
I have this weird problem. When I clear the model in the controller, the input field binded to the model with ng-model wont clear when the form is submitted.
Controller
angular.module('starter.controllers', [])
.controller('DashCtrl', ["$scope", function($scope) {
$scope.clearInput = function() {
console.log("I get there...");
//Here's the issue!!! It's not working as expected!
$scope.message = "";
};
}]);
Template
<ion-view title="Dashboard">
<ion-content class="padding">
<form name="myform" ng-submit="clearInput()">
<label class="item item-input">
<input type="text" ng-model="message"/>
</label>
<button type="submit" class="button button-positive" >
button-positive
</button>
</form>
</ion-content>
</ion-view>
I get the console output "I get there", so the function gets activated. What am I missing here?
clearInput() and ng-model refer to different scopes after the value of input has changed. Please see this SO answer for deeper explanation.
I am trying to do a Pop-up in Angular.js with a table, where there is an option to click in a particular cell in a row which gives a pop-up. Below is the code snip.
Html code
<table class="table table-bordered">
<tr><th>Number</th><th>Comment</th></tr><tr ng-repeat="col in Data|filter:search1"><td>{{col.cd}}</td><td><div ng-controller="igCtrl">
Comment
<ig-comment></ig-comment>
</div></td></tr></table>
Controller
function igCtrl($scope) {
$scope.addComment = function (col) {
$scope.cdn="";
$scope.cdn = col;
console.log("testing"+$scope.cdn);
$scope.check = true;
if ($scope.check) {
$("#comment").modal('show');
};
};}
Directive
app.directive('igComment', function () {
return {
restrict: 'E',
replace: true,
template:'<div class="row">
<div class="modal fade" id="comment" aria-hidden = "true" >
<div class = "modal-dialog" style="width:300px;height:600px;">
<form class="form-horizontal" name="form" ng-submit = "submit()" novalidate="novalidate">
<div class = "modal-content" >
<div class = "modal-header">
Data is :{{cdn}}
<input ng-disabled="form.$invalid" type="submit" class="btn btn-primary" id="submit" ng-click="submit()" value="Submit"></input >
<input type="button" class="btn btn-primary" data-dismiss="modal" value="Cancel" ng-click="cancel()"></input>
</div>
</div >
</form>
</div >
</div>
</div>'
};
});
Data for this table is coming from the database. The variable cdn in the controller is getting updated and the console.log statement in the controller gives correct output.
But cdn in the directive is not getting updated and hence not showing rite results in the pop-up.
How to rectify this?
Thanks
I'd use an isolated scope for this.
e.g.:
<ig-comment cdn="cdn"></ig-comment>
* this takes the "cdn" value from the controller's scope
and in the directive:
return {
restrict: 'E',
replace: true,
scope: { cdn: '=' } // this assigns the "cdn" from the directive attribute above
// to the directive isolated scope (under the same name)
...
The rest seems fine (ignoring the unfortunate jquery mix) and should work.