D
D
Dartess2015-03-16 01:20:43
JavaScript
Dartess, 2015-03-16 01:20:43

How to make friends AngularJS and custom inputs?

I just started to understand AngularJS, and I have no one to ask ...
I'm trying to use getting the value of a variable from the input (radio). This is easy to do - ng-model="realty". Until I put a custom view on this input... I use Jquery Form Styler. I get a wrapper like:

<div class="jq-radio">
<input type="radio" name="step-1" ng-model="realty" value="house">
<div class="jq-radio__div"></div>
</div>

And... that's where ng-model stops working. Completely.
Okay, I haven't experienced all the beauty of ng-model yet. And I decided to try to replace ng-model with
ng-click="realty = 'house'"
The situation is similar. As long as the inputs are not styled, it works. With a styler - does not work.
Okay, I thought. But what if we dynamically assign a similar ng-click to all parents with input type="radio"? Hung. Fail. As I understand it, the ng-click hung after AngularJS initialization will no longer work.
Further - worse. I figured out from the console that on .click () on the input itself, both the switching (visual) of stylized divs and the ng-click event are triggered. I foolishly tried to hang a click handler on jq-radio, "clicking" on a child input. Got recursion and browser crash.
Help, please, with advice, what can be done here? I can’t refuse stylized intupts. There remains an option to postpone further acquaintance with Angular to the far corner again, but this will be a personal fail...

Answer the question

In order to leave comments, you need to log in

3 answer(s)
L
lega, 2015-03-17
@Dartess

You can try Angular Light, here is an example that only renders elements. And so if it is necessary to receive values.
Inherited standard al-radio jsfiddle with two-way binding for Jquery Form Styler.

S
Sergey, 2015-03-16
Protko @Fesor

function MyCustomInputDirective () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModelController) {
             // ... а тут происходит магия
        }
    };
}

I
Ilya Agarkov, 2015-03-17
@ElianL

In order to work with any of these jQuery plugins, you need a directive that will take care of keeping the view and model in sync.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question