This HTML button code is in controller:
On click of a button, trying to call this function:
<button ng-click="vm.openpopup()" ng-if="!vm.data.length"
uib-tooltip="Add Business Value Chain"
class="btn btn-default `enter code here`ti-form-action-btn" id="add-bvc-btn">
<em class="glyphicon glyphicon-plus-sign"></em>
Add
</button>
function openpopup() {
$scope.$broadcast('popup');
}
Below is the broadcast listener code which is inside component under the same controller mentioned above:
$scope.$on('popup', function () {
openModalPopup();
});
The button is displayed only when there is no data present.
Function call is absolutely fine, but broadcast works only once if there is data and if those data are deleted manually, then button gets displayed and broadcast works. But for on page load, if no data present. Broadcast not getting triggered.
Tried using $rootScope.broadcast, still no luck.
Also checking with some other answers, binded the block of code inside $timeout, still no results.
So this is a communication between controller and component using broadcast. How to handle this on load?
I think the issue in your case you have controlled the visibility of your button with ng-if, try it using ng-show instead of ng-if. In case of ng-if there is a chance that the template not to load. I hope that will solve your problem.
Related
I am really struggling with the issue with custom directive component. I have created TreeView dropdown component based on Angular ivh-treeview angular-ivh-treeview. Becasue ivh-treeview by default does not have recommended functionality and stylig I have extend it. But now I am facing an issue I haven't seen before and I would be really thankful for your help. The component works absolutelly OK in the modal. When you click on the checkboxes it reacts pretty fast and everything looks great. But when I use the same component on any other page (not in the modal) it has really strange behavior. When you select any checkbox, it does not update immediatelly, you have to click somewhere else on the page, or close and open dropdown to see changes. I have no clue what is going on there and why the same component works in the modal. Maybe it's because modalInstance has different scope but I am done.
Here you can see and play with an example (Page 1 - modal, Page 2 - no modal): DEMO
This is just a fragment of the code I had to include to be able to link here DEMO on Plunkr
<ivh-dropdown ivh-model="treeStructureFinal" selected-array="formData.casinos" is-disabled="inReadMode" placeholder="Select casinos"></ivh-dropdown>
Thank you everyone!
When this kind of thing happens I always think about $scope.$apply().
So I did a minor modification and now the directive works fine, just by adding a scope.$apply at the end of the click handler:
$document.bind('click', function (event) {
var isClickedElementChildOfPopup = element.find(
event.target).length > 0;
if (!isClickedElementChildOfPopup
&& element[0].children[1].classList.contains("show")) {
element[0].children[1].classList.toggle("show");
}
scope.$apply();
});
Take a look at it working:
https://plnkr.co/edit/s1UNCXNCZ46zXjte9lpZ?p=preview
Hope that helps.
I am very New to AngularJS and I have an web Application that calls an ng-click when a button is clicked. I would like to add code to call this function on page load.
This is the where the function is called in the code. Is there anyway to do this?
When element is loaded you can fire ng-init
<div ng-init="zoom.fit()">
some code
</div>
ng-init documentation
Use this in your controller
$scope.$on('$viewContentLoaded', function() {
$scope.zoo.fit();
});
In angularjs when i click on button,then it will call function of Controller but in that function i am not able to get $scope or $rootScope.
Here is link :
https://plnkr.co/edit/rFDGLPMdvW4BeTBdu5s8?p=preview
when you click on Go To Store.. store page will open.. and click on Add to Cart.. then $scope function will call..but not getting $scope in that functionenter code here
You have a top-level controller called 'MainController'. The Store.html view uses this controller, but the AddToCart function is located in the StoreController. You need to add the Store controller to the store view (top line of store.html):
<div ng-controller="StoreController">
Updated plunkr
Your app is working fine and if you open Developer tools you will see that the debugger breakpoint is being hit. The issue that I found is that you don't have the route defined for Cart. Also the $scope.cartItemCount won't be auto-updated
I've ran into a bit of a challenge in my AngularJS app. I have a form that users can fill out. When they submit, a directive that I've downloaded from Bower takes over, does a POST in the background and then returns to my scope function to finish up. I need to disable the button that is clicked and show a loading img when they click the submit button. Normally, setting an 'updating' variable in the scope would take care of this:
<input data-ng-disabled="form.isUpdating" type="submit" value="Submit"/>
<img data-ng-show="form.isUpdating" src="/images/spinner.gif">
$scope.saveForm = function (){
$scope.form.isUpdating = true;
// Do some stuff
$scope.form.isUpdating = false;
}
The problem I have is that I don't have control over what happens initially, because the directive takes over, which has no access to my scope. I could mess with the code, but I would rather not if I don't have to. So when I click the button to submit, nothing happens until the POST in the directive is complete, which is not good for my user.
I can't do an ng-click and set form.isUpdating to true there, because that immediately makes the button disabled so the click doesn't register. You can't use ng-click and ng-disabled together as far as I know.
Can anyone think of a good way to get around this?
Do the stuff you need to get done async. this will put it outside the current
digest cycle.
like this:
$scope.saveForm = function (){
$scope.form.isUpdating = true;
$timeout(function () {
//this will run outside the current
//digest cycle, so the UI has a change of updating
// while I'm working!
// Do some stuff
$scope.form.isUpdating = false;
},0)
}
Hope this helps you!
In web site I have to add "Back" button or Link URL which will redirects to me previously visited page.
Currently I have added below code, but it doesn't always work.
<i>Back</i>
I observed that it is not working in Google chrome.
<script>
function sample(){
window.location.href = window.history.back(1);
}
</script>
<input type="button" value="trying" onclick="sample()"/>
I have tested here it is working test ... :)
Event this work as same
<i>Back</i>
Try this :
<input action="action" type="button" value="Back" onclick="history.go(-1);" />
The following was an incorrect assumption by me
The value passed to onclick should be a function to call when the link is clicked. You are passing window.history.back() which is the value returned by the back function.
Try the following.
<i>Back</i>
Turns out I assumed, incorrectly, that the value of onClick should be a function to call on click. As Brian North and putvande pointed out in the comments it should be the javascript code to run when the event is triggered.
Suggestion
However one should generally avoid binding events in the way you are doing as it couples presentation, HTML, too tightly with the javascript. Instead one should bind the click listener from an external javascript file using for example addEventListener or jQuery.on.
jQuery example
HTML
Back
Javascript
$(function() {
$("#history-back").on("click", window.history.back);
});