Binding lost for outputModel

[mmsilviu]

The binding for outputModel is lost during refreshOutputModel() method call. In order to clean and keep the data binding, the code can be changed from $scope.outputModel = []; to $scope.outputModel.length = 0;

[isteven]

@mmsilviu,

I don't really understand the problem. Please replicate in Plunker or JsFiddler.

[mmsilviu]

Based on the example:

In my controller the outputBrowsers value is not updated when I select some items from directive. Always the value is empty array. I will try to replicate in Plunker or JsFidler.

The data binding Is lost because the $scope.outputModel is initilialize with a new array. This code is in refreshOutputModel function

[TheMaxKim]

I too am coming across the issue where my output model is not being updated at all, could anyone clarify this issue?

[isteven]

@TheMaxKim ,

Can you please replicate the problem in Plunker or JsFiddler. Thanks.

[thanhtung1509]

I also have the same problem with your component. I have checked your code and I saw that you always reset the outputModel in refreshOutputModel() function.

I haven't prepare a plunk yet but I can describle my workflow as bellow:

I have a list form that shows all records data I added before. When I click on a row, my app link to a details screen which uses your component (isteven-multi-select) unfortunately, selected data cannot be binded to isteven-multi-select.

[thanhtung1509]

Hi isteven

I saw that you reopen this issue instantly. It seems that you understand my idea. Would you please let me know your plan to fix it?

Thank in advance

[isteven]

Hi @thanhtung1509 ,

The output model is indeed, refreshed every time, intentionally.

I re-opened the issue because I know something is happening, but I don't understand the underlying problem behind it. And still, nobody provided a Plunker or JsFiddler.. :(

[thanhtung1509]

Thanks for your help, I will provide you plunk as soon as possible.

[thanhtung1509]

Hi @isteven

I have finished creating a plunk that show the issue :

http://plnkr.co/edit/KCLafkKTLGrRtchbcEja?p=preview

As you see, I have 2 persons that each person can do 2 jobs simultaneously but when I click on each person on list to link to detail page. I cannot binding selected jobs to your component.

Please take your time to investigate my plunk. I apprecicated your help.

Thanks

[thanhtung1509]

Hi @isteven

It is my fault. I had an misunderstanding about input_model and out_put model. I should turn on property ticked = true in input_model to binding data for your component. I recognize my fault when I read your code.

[isteven]

@thanhtung1509 ,

Glad that you managed to find the issue. Cheers.

[TheMaxKim]

Hey @isteven , Sorry for not getting back to you on a Plunker, been really busy in real life lately. Let me try poking at it again to ensure that it wasn't just a mistake on my end.

[isteven]

Hey @TheMaxKim ,

No worries, just keep me updated when you have it. Same here, been very hectic with stuffs. Cheers.

[guitarfish]

@isteven , I'm seeing this issue also on the onSelectAll / onSelectNone callbacks. Essentially, the binding is lost, thus the callback function is called before the update loop finishes. Issued pull-request with suggested fix (thanks to mmsilviu):

https://github.com/isteven/angular-multi-select/pull/260

[isteven]

Hi @guitarfish ,

Can you please provide a Plunker or JsFiddler so I can understand the issue? I've been waiting for a proper Plunker or JsFiddler from the beginning of this thread to no avail.

[kilisoria]

Hi @isteven,

Great component! But I'm having the same issue commented previously. Here there is a example about the issue:

http://plnkr.co/edit/4sCQy30RxV6Y2VowyC3F?p=preview.

Do you know what is the wrong?

Thanks in advance!

Regards!

[isteven]

Hi @kilisoria,

I am currently abroad and don't have access to my dev PC, but my wild guess is; scope problem.

Let's say you have scope A, This is the main scope in your controller / DOM.

From what I see, you use ng-if around the directive

<div ng-if="1"> ... </div> 

This will create a new scope, say B (this is how AngularJs works). So the output is like.. B.selectedScope.

Now your

<button ng-click="a()">Print output</button>
<p>selected scope: {{ selectedScope }}</p>

Are outside the ng-if - they belong to scope A. A.selectedScope is still blank.

As a prove, if you move those inside the ng-if, it will work.

Btw previously there was a user who experienced the same problem, but with ng-repeat. Similar thing happened here - AngularJs created new scope with each repetition.

Hope this helps. Cheers.

[vramku5]

I think I have a similar scope problem. I am trying to use this within an ionic modal and the intended output-model scope variable is not populated.

If I add a display item {{outputStepUnit}} it shows up fine. However, in the controller's scope the output-model variable is not updated. This suggests that it is updating a variable in some other scope.

Note: All other input fields (e.g. stepName) in the modal are updating properly as expected.

Is there any way to update the parent scope variable like in a close function?

<div class="modal">
   <ion-content>
      <form ng-submit="upsertStep()">
        <div class="list list-inset">
          <label class="item item-input">
            <span class="input-label"> Name </span>
            <input type="text" placeholder="Step Name" ng-model="activelyEditedStep.stepName" autofocus>
          </label>
          <label class="item">
                <div class="input-label amp-modal-item-label col">
                    Step Units
                </div>
                <div isteven-multi-select    
                    input-model="inputStepUnit"    
                    output-model="outputStepUnit"
                    button-label="name"
                    item-label="name"
                    tick-property="ticked"
                    orientation="vertical"
                    output-properties="name"
                    on-close="multiselectClose()"
                >
                </div>
          </label>

        <span> {{outputStepUnit}} </span>
        </div>
    </form>
  </ion-content>
</div>

As many layers are involved, I am not sure how to make it into a plunker example.

thanks

[srowatt]

If make the output-model an object that contains the array of selected values your controller will not lose the two way binding. See this plunk where I've wrapped the output model array in a model object: http://plnkr.co/edit/cfiUVDw5sx9BrpzZp0FS?p=preview

[vramku5]

Thanks srowatt. What you suggested works.

The qn I posted was a year ago, so I dont have that same context. But I tried your example and then removed the wrapper to check as well.