My Problem is Click event is not firing from alert.html.
In index.html I have included output.html assigned to outputController, in output.html I have included alert.html by default alert.html will be hidden.
When I click on a button from output.html it will fire openWindow() method, inside it will call javascript alert method. (Where as we have overwritten the window.alert method to change the view of normal basic alert.) I can able to get the view in alert dialogue and even I can able to access the $scope member variable in alert.html but my problem is I can not fire click event. anyone suggest me what could be the problem with my code.
OutputController.js
App.controller('OutputController',[ '$scope',function($scope){
$scope.testVal = "Ajith";
$scope.checkClick = function () {
console.log("Clicked");
};
$scope.openWindow = function (title) {
alert(angular.element(document.querySelector("#HtmlA"))).html(), title);
};
}]);
index.html
<div class="tabpage" id="tabpage_4" ng-controller="OutputController">
<div class="outputTab" ng-include src="'views/output.html'"></div>
</div>
output.html
<input type="button" ng-click="openWindow('A')" value="OenAlert"/>
<div id="HtmlA" ng-controller="OutputController" ng-init="Type = 'A'"
ng-include="'views/alert.html'" ng-hide="true"></div>
alert.html
{{testVal}}
<input type="button" ng-click="checkClick()" value="Click Here"/>
As per above suggestions I have removed my custom alert, I have used angular-ui modal popup. It was working fine.
http://plnkr.co/edit/FEtJo3?p=preview
Related
i have angularJS 1.5.0-rc.2
I found on the internet that i can use the directive
data-ng-disabled="Expression"
But it won't disable a button.
What i tried :
<button data-ng-disabled="false">Select</button> // don't work
<button data-ng-disabled="loaded">Select</button> // don't work
<button data-ng-disabled="loaded != false">Select</button> // don't work
Loaded is defined in my controller as $scope.loaded = false.
How can i disable a button ? Thanks
The button will be disabled only if the expression is true.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="disableBtn=true">
<button ng-disabled="disableBtn">test</button>
</div>
I make it without derective. I made it like this:
remove
In controller first of all made
$scope.disabled = true;
Than in if/else remove class disabled and change $scope.disabled = false;
I give you example with tag <a></a> this work with button simple.
And in button ng-click first made Test ng-click="disabled||usertaskctrl.removeTasksToArchive()" before make click on some you function.
Try this
1 This is direct method of implementation
<script>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<button ng-disabled=true>test</button>
</div>
2 another way you can change the value for
<div ng-app>
<button ng-disabled=dsblBtn>test</button>
</div>
in controller inside init function
$scope.dsblBtn = true;
Always use the button tag with ng-disabled in angular js otherwise it will not work.
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
How can we trigger the button click event using AngularJs and show an alert message box? I have tried the alert("message") messagebox but it doesn't work.
You can use ng-click on button something like this:
Controller :
var VLogin = angular.module('myApp',[]);
VLogin.controller('TestCtrl', ['$scope',function($scope) {
$scope.clicked = function(){
alert("Clicked");
}
}]);
And in your HTML like :
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click me!</button>
</div>
</div>
Here is the working Fiddle :- http://jsfiddle.net/nuejh9h6/
Thanks
we need to see what you have wrote but in general this is how ng-click works https://docs.angularjs.org/api/ng/directive/ngClick and you can write your alert code inside or in a new method and call it.
Hello currently I have a html form like that:
<div ng-controller="DemoCtrl">
<form name="myForm" action="/a/url">
....
</form>
<button ng-click="next(myForm)">Klick me</button>
</div>
is there a way to access the form action ?
what i suggest you not to provide action name in the form, instead of that within ng-click action javascript method in JS file either use $http service or $window service.
This can happen with the following htmlcode:
<div ng-controller="DemoCtrl">
<button ng-click="next(myForm)">Klick me</button>
</div>
JS Code:
$scope.next = function (formObject) {
// whatever you want to do
}
$scope will pick all the object defined within form tag.
I am also new in ng, if anything wrong here please correct me.
I'm using AngularStrap with bootstrap.
I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?
I instantiate the controller on a button like this:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
and the userLoginController has this:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.
I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.
If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?
here's my plnkr:
http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
When in the on-click function do
$scope.myClickEvent = function () {
this.$hide();
}
Figured out a good method:
I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.
new controller code:
var loginModal = $modal({template:'/template.html', show:false});
$scope.showLogin = function(){
loginModal.$promise.then(loginModal.show);
}
$scope.$on("login", function(){
loginModal.$promise.then(loginModal.hide);
});
the button just looks like this now:
<button type="button"
class="btn btn-success btn-lg"
ng-click="showLogin()"
>Click here to log in</button>
and my template has the old ng-controller in the first tag.
I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.
<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">
In the controller:
// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
$scope.hideModal = hideModalFunction;
}
I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).
All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.
So your ng-click would look like: ng-click="authenticate();$hide()"
Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal.
<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form ng-submit="submit()">
<input type="text" ng-model="name" />
<button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
</form>
</div>
</div>
</div>
</div>
Perhaps open it with the service on click and have it close itself on the $destroy event?
$scope.openModal = function()
{
$scope.modal = $modal({
template: "user-login-modal.html",
container="body"
});
}
$scope.$on("$destroy", function()
{
if ($scope.modal)
{
$scope.modal.hide();
}
});