I'm working on single-page web app using angularjs.
I'm using NGSwitchery directive for checkbox.
I want to handle an on-change event when user switching the NGSwitchery control.
I tried to attach ng-model and ng-change, but it's not working.
Is there any way?
Following is the code I tried.
Template
<input type="checkbox" id="socialsharing_facebook" class="js-switch" ui-switch ng-model="user.enable_facebook" ng-checked="user.enable_facebook == 1" ng-change="updateUser()" />
updateUser() isn't called, when I change switch.
I haven't used NGSwitchery, but usually you can just watch the model from your controller. The nice thing about that is that if the model changes by some other means, you will be notified of that too. Something like this:
$scope.$watch("user.enable_facebook", $scope.updateUser);
Related
I found some article explaining why ng-change may not fire in a repeat, but I think I tried everything I can do and my ng-change is still not firing.
I made a demo here
<input type="radio" ng-model="select" name="names"
ng-change="$parent.$parent.$parent.noSelected(select)">
I included a model and tried various $parent.$parent but still it wasn't firing.
Can someone tell me what went wrong with my example?
The radio button code you have listed is in a template, that is being consumed by a directive. That directive does not have access to your controller scope, as the scope is isolated deliberately.
You need to look thoroughly at the smart-table documentation to achieve what you are trying to do.
For a project I'm working on at the moment, I need to have styles which aren't supported on regular checkbox elements.
To work around this I've created an angular directive which recreates the checkbox functionality. While this is working for me, I do question that I'm using the correct html markup as something doesn't feel right about what I've got.
Traditionally you'd use something like this for a checkbox with a label:
<label>
<input type="checkbox" /> Click to check
</label>
and by clicking on the label it'd toggle the checkbox.
Since I'd like to replicate this functionality with angular, I've knocked up a demo here that I believe does the trick but I wonder if I'm missing something? I suppose it's worth mentioning that screen readers are not an issue with this project. I also considered how this may render on mobile devices but since it's only a checkbox it should work correctly.
Have I approached this correctly or am I doing something hideously wrong here?
I think you don't need scope variables you defined in directive.
{elementId: '#', isChecked:'=?'}
By the way, what did you want to tell with those '=?' ? Actually it goes 'typeOfVariableConnection'+'attributeName'. So by your way, it should accept two-way binding with attribute named '?'. I don't think such attribute name is allowed by HTML specification.
But you will need value of checkbox outside the my-checkbox directive, so it will be a good idea to pass some scope variable to that directive to have access to it's value in controller.
I've changed plunker a little bit, connected native checkbox and your own by same model value. http://plnkr.co/edit/bJF1uggJjksiRT7Zkj9M?p=preview
I have an input box and Its bound with datepicker. In my view, there is small calendar icon besides this input box. I want to trigger click event of an input box when user clicks on this calendar icon. I have done this using directive which I have applied to calendar icon. But its almost like jQuery. So is there any different way to achieve this? If my approach is wrong then please guide me to the right direction. I am new to angular and I have read some articles where I read that avoid use of jQuery. Thanks
My Directive
myApp.directive('openCal',function($compile,$filter) {
return {
link:function(scope,element,attrs) {
element.bind("click",function() {
element.siblings("input").trigger("click");
});
}
};
});
Its working fine. But I am not sure that is it right approach or not??
No, if I understand what you are trying to do you are over-complicating things a bit.
In your case it looks like you would have something like:
<img open-cal/>
<input ng-click="doSomething()">
Where click on the img triggers a click on the input, via the openCal directive. Instead considering doing something like this:
<div ng-click="doSomething()">
<img>
<input>
</div>
If doSomething() needs to get data from the input, use ng-model to bind data from your input to your scope.
ALTHOUGH!
If you ever need to do a directive, that is the right way to do it. Using element.bind is not a problem since that is included in Angular. What you want to avoid is using stuff like $('.calendar').click and such.
Another way to approach this would be to add a <label> element for your input field that contains the calendar. Then clicking the calendar would focus the input field. Then all you'd have to do is listen for the focus event on your input field to do your extra work. This has the added bonus of working if someone navigates to your input field via the keyboard by hitting the tab key.
I am new to Angular and have basic problems, getting Angular-UI-Bootstrap to work in combination with AngularJS. Here a simple example, an usual input field that uses ng-change for event handling, and which has a popover. Without the popover attributes, the codes works fine. When the popover attributes are added, the popover is displayed correctly, and looks fine, but the event handler is not called, and also the password model not updated, when the value of the input field changes.
Same problem holds e.g. if I have a button with event handling code and a popover. Same problem also if I do not use popover, but tooltip.
<input type="password" ng-model="password" placeholder="New Password"
ng-change="onPasswordChanged()" popover="I am a popover!"
popover-trigger="mouseenter" />
I am using ui-bootstrap-tpls-0.3.0.js and AngularJS v1.0.7.
Does someone know what the problem is?
Popover directive creates a child scope, so when you bind your model to a primitive, the binding will stay inside that scope (it will not propagate upwards). See "What are the nuances of scope prototypal / prototypical inheritance in AngularJS?" for more info on inheritance.
Workaround is to use a dot notation when referencing your models:
<input type="password" ng-model="data.password" popover="I am a popover!"
popover-trigger="mouseenter" />
DEMO PLUNKER
I have a directive that creates and manages a bootstrap modal dialog.
Currently I have the directive watch a boolean held on the controller. The controller can then set this to true to have the modal dialog display.
This seems kinda messy. Is there a better way?
The directive in action:
<modal trigger="shouldDisplayModal" title="{{modalTitle}}"
message="{{modalMessage}}" positiveclick="okClicked()"
negativeclick="closed()"
positivelabel="Ok" negativelabel="Cancel"/>
The watch in the controller of the directive:
// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){
if (newValue)
{
// enable any disabled buttons
modalElem.find('button').removeClass('disabled');
// show the dialog
modalElem.modal('show');
}
else
{
// hide the dialog
modalElem.modal('hide');
}
});
Here is a working example: http://jsfiddle.net/rabidgremlin/Ya96z/31/
UPDATE: Here is a fixed up example that corrects some issues with multiple directives on a page: http://jsfiddle.net/rabidgremlin/sjbCJ/1/
I was going to suggest using ng-show inside your directive's template (this what the dialog component on the directive page does, along with a visible attribute that is just like your trigger attribute), but then I saw that you also need to enable some buttons before modifying the visibility.
So, I think what you have is fine, and I don't see it as messy. Either your directive has to $watch for something, or you could create the dialog when an event happens -- this seems to be what the $dialog service does that #pkozlowski mentioned in the comments. The latter would not need a trigger attribute.
I blogged about working with angular and bootstrap modals just a couple weeks ago.
My solution involves a service, all of the hide/show magic for the modal is handled by bootstrap's javascript, and angular just worries about the data.
http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely