1.2-beta5 Modal Display Issue

[lylepratt]

Anytime I try to display a modal on 1.2-beta5 I get this warning, and the modal never appears:
Warning: Attempt to set uninitialized shared state: modalName

Any ideas what is going on?

Also, when I include a modal in a ng-include template, it errors on mobile:

TypeError: Cannot read property 'childNodes' of undefined

[mcasimir]

I need some snippet here, anyway that means something is trying to update modalName before it is initialized.

If you're attempting to have modal open by default you could use ui-default attribute.

For ng-include: I will add test for this case, in the meanwhile it would be extremely useful to have the line number triggering the error.

Thanks

[lylepratt]

We're not attempting to have the modal open by default. I can try to get the line number, but last time I tested, we installed via bower and its all minified. I don't believe anything is updating modalName before it loads.

All we are doing is including the modal html on the page:

<div ui-content-for="modals">
    <div class="modal" ui-if="tagActivityModal" ui-state="tagActivityModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close"
                    ui-turn-off="tagActivityModal">&times;</button>
            <h4 class="modal-title">Tag Activity</h4>
          </div>
          <div class="modal-body tag-modal">
            <div bv-tag-activity></div>
          </div>
          <div class="modal-footer">
            <button ui-turn-off="tagActivityModal" class="btn btn-default">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

In the cast of the ng-include error, its the same as above, except the html is being included from a sub-template.

[mcasimir]

I ve changed demo right now to use modals from remote templates and everything went fine.. that's strange. I'll update website demo soon so you can see eventual differences by yourself.

[n9986]

Moving the modal template to a parent template seems to solve the ng-include issue. Apparently this was discussed on the Angular Issue list as well.

Further update on this: I am initializing the tagActivityModal var in app.run, manually

SharedState.initialize($rootScope, 'tagActivityModal');

This removes the warnings but the modal refuses to toggle.

The button that does this:

<button class="btn btn-xs btn-link right"
             ui-toggle="tagActivityModal"
             inbox-action="{ row: row, activity: activity, action: 'tag' }"
             stop-propagation><i class="fa fa-tag"></i> {{ 'Tag' | translate }}</button>

I have tried removing our custom directives inbox-action and stop-propagation (just in case if they were interfering with something) to no avail.

Strange bit about this is that it works perfectly in web browser, but somehow fails in a cordova app.

[mcasimir]

What stop-propagation does? Could you try to remove it?

[mcasimir]

Sorry now I noticed you already tried this. Could you try replacing ui-toggle with ng-click='Ui.toggle("tagActivityModal")' then?

It may be related to ui-* trigger events

[n9986]

So this is what I just tried.

On the button:

ng-click='wow(); Ui.toggle("tagActivityModal");'

In the controller:

$scope.wow = function() {
    alert();
};

The alert fires perfectly fine on mobile but the modal doesn't pop up. On desktop, both events happen as expected.

[mcasimir]

Great this really helps. Could I ask one last question, does it happens with cordova on both IOS and Android?

[n9986]

The device I tried on is a Nexus 5. And I have tried it in the iOS simulator on a Mac. In both, it exhibits the same behaviour.

[lylepratt]

I've tried this on an actual iOS device and its the same as simulator.

[lylepratt]

I believe I found the issue with the modals not being able to open. It is because of a difference in how our web and mobile apps are bundled. After fixing the discrepency, the modals are opening now.

However, I still get the issue relating to childNodes:

Cannot read property 'childNodes' of undefined

[lylepratt]

Ok, nevermind, @n9986 already fixed the childNodes issue, and I screwed it up agian. I think we're good to go here!

[garymazz]

I just tried this using a browser, I have the same issue. Its not fixed

[Amerr]

Please update the docs. and provide a solution for triggering modal window.

[colliander]

+1 on getting the "Warning: Attempt to set uninitialized shared state: [modalName]". Any progress?

[X17]

@mcasimir @lylepratt

Facing the same issue:

whenever i try to fire modal / overlay it displays the below message

Warning: Attempt to set uninitialized shared state: modal2
On line Number: mobile-angular-ui.js:1655

mobile-angular-ui.js code snippet (1644 - 1658)

 setOne: function(id, value) {
          if (statusesMeta[id] !== undefined) {
            var prev = values[id];
            values[id] = value;
            if (prev !== value) {
              $rootScope.$broadcast('mobile-angular-ui.state.changed.' + id, value, prev);
            }
            return value;
          } else {
            /* global console: false */
            if (console) {
              console.warn('Warning: Attempt to set uninitialized shared state:', id);
            }
          }
        },

var prev = values[id];
            values[id] = value;
            if (prev !== value) {
              $rootScope.$broadcast('mobile-angular-ui.state.changed.' + id, value, prev);
            }
            return value;
          } else {
            /* global console: false */
            if (console) {
              console.warn('Warning: Attempt to set uninitialized shared state:', id);
            }
          }
        },

My Html code

<a href="" ui-turn-on="modal2" class="btn btn-default">Show Overlay</a>
<div ui-content-for="modals">
    <!-- <div ng-include="'modal1.html'"></div> -->
     <div ng-include="'modal2.html'"></div>
</div>

Kindly Assist.