So, I'd like to show a div when a flag is set to true. I've been able to achieve this with ng-show by toggling the value of the flag with a button click.
However, I'd like to use ng-show when that flag is changed by something other than a button click. There is a stream of events that I'm taking in from my backend service, and one of the events would flip this flag, but ng-show never seems to fire off unless I trigger it specifically with a button. Right now, the only way that I can get that effect that I want is just by directly calling **document.getElementById().hidden = true/false.**
Any ideas? Thank you!
Maybe I'm misinterpreting your use case but it seems very simple: just use a variable in your controller / component and reference that variable in your ng-show.
// in your html
ng-show="myFlag"
// in your js
$scope.myFlag = true;
It may be a little more complicated depending on how you are using that backend service.
Related
I have a list which I iterate with ng-repeat.
for each <li> element, I use ng-init="foo(item)" to calculate the value for display.
this is working well.
I want to implement a refresh button, but problem is that ng-init is not called again.
How can i enforce the call for ng-init again?
i've tried to call $scope.apply() but that did not help.
If re-rendering is not an issue, you can clear the ng-repeat array then add it back. This will re-render the ng-repeat causing ng-init to fire on each item again.
The downside to this is it will "flicker" depending how you have your css/animations setup. If you want the refresh to be seamless without visible change to the render, you'll likely need to use something other than ng-init.
I think it doesn't have to do anything with '$scope.apply()'. 'ng-init' will only fire once, during DOM rendering. Rather than using ng-init, did you try angular interpolation binding?
For example - <li><span>{{foo(item)}}</span></li>
I'm building a questionnaire out of directives which show the correct input based on certain expectations. Those expectations (including any formerly given input from the user) comes from a parent $scope. Everything is set up in the link function of AngularJS's directive definition object
Where things go wrong is when using md-checkbox: the ng-model of the checkbox inside the directive is set to true, the md-checkbox is still false. I can confirm that by adding a simple input type="checkbox" with the same ng-model property, the simple checkbox is checked, whereas the md-checkbox isn't.
Whenever I click on the md-checkbox twice, it does get checked. So I gather that there is something wrong with the binding. I built a CodePen which demonstrates it. The code inside the pen is almost taken verbatim from my source code
Stuff that I already tried:
Using $scope.$apply() after handling all (DOM) logic in the link function
Idem but with $scope.$digest()
Setting a $timeout with no delay (as way of a 'safe' $apply())
Even going so far as to store the current answer (true or false) in a variable, setting the ng-model property to undefined, and then setting it back to the stored value, all inside a $timeout
I'm at loss here, it looks like something simple given the fact that all the other inputs have their correct data in it.
Replace class with ng-class because ng-class lets you to dynamically bind the class to the element
Depending on your codepen the problem is class="md-checkbox-{{expression}}". I forked your codepen. You can use ng-class. I think this is a bug.
What is the best way to trigger/activate CSS animation from within a function in AngularJS?
In my case, I have a slide, which has one label <> and a button <>.
When a user clicks on the button, I'm calling an API, and on failure case, I need to animate the label.
One way will be to use ng-class directive. In which creating a scope variable, and set and reset value using $timeout service.
But I'm thinking of making a function something like playAnimation() and call this function which will trigger the animation.
What will be the steps for doing so in anularjs?
I'm using angularjs version 1.5.
I don't think creating a function would be better than using ng-class as you initially suggested. You could them benefit from Angular's animation classes (e.g. ng-enter, ng-leave etc), saving code in your scripts.
I'm using the Angular Material component framework.
I've defined a page with a md-sidenav called sidebar that is automatically shown (on the left of the screen) if resized to a certain width. This is possible thanks to the directive md-is-locked-open="$mdMedia('gt-sm')".
What I try to achieve seems quite straightforward: I just want to know (have an event triggered) when the sidenav is being shown / hidden (by user, or automatically). I've tried several different solutions, but nothing seem to be working.
I have a plunker that has the same behaviour as what I'm are trying to achieve. In the activate function, I try to capture the events (or what I thought would be events, doesn't seem so because it's not working).
I tried almost all the solutions that were given here and here, but no luck (specially when automatically showing / hiding the sidenav).
Any ideas here?
Thank you very much!
You could use the $mdMedia service in the controller instead of in the view. From the documentation
The media query will be re-evaluated on resize, allowing you to register a watch.
So you can register a watcher for your desired media query size, then call a function when the watcher fires:
$scope.$watch(function(){return $mdMedia('gt-sm');}, function(){
$scope.showSideNav = !$scope.showSideNav;
console.log("SideNav State Change");
});
Then I'd setup the sideNav like this:
md-is-locked-open="showSideNav"
Here is a working example, forked from your Plunker
I have an ionic angular app that started to fire the ng-click twice in a row if I add an ng-disabled property (I wanted to prevent them from clicking the button twice).
Why does it fire twice in a row with that ng-disabled property?
<button ng-if="post._id"
class="button button-block button-outline"
ng-click="createPost()"
ng-disabled="isSaving">Update</button>
I haven't got an answer for your problem, but I have another solution for your problem, here is a plnkr
I made a directive called networkInfo which sets the buttons content depending on whether the network call is being made or not.
It's not the perfect way, but a link function in 7 lines, and a button with two attributes on it ain't half bad.
The attribute makingCall is just a boolean of whether the call is being made.
The attribute networkInfo initiates the directive and fires the link function binding makingCall to its scope.
The function update() uses $timeout to imitate an asynchronous network call (using $http or something).
Firstly it checks vm.working, if it is true then don't make another network call. Then it sets it to true, to inform the directive that a call is now in process.
Finally it fires the $timeout which after 2secs will set vm.working back to false to indicate the end of the network call.
Obviously I have used boostrap because that is what i'm more familiar with, however, like iconic its just stylings.