Modal gives Expression 'undefined' in attribute 'open' used with directive 'modal' is non-assignable! error

[hsoto92]

I have the following modal:

<div id="md-newresource" class="modal modal-fixed-footer" ng-controller="newresourceCtrl">
     <form method="post" role="form" name="newResourceForm">
        <div class="modal-content">
          <h4>New Resource</h4>
          <div class="row">
              <div class="col l6">
                  <div input-field>
                      <input type="text" name="id" id="id" ng-model="resource.id" />
                      <label for="id">Resource ID</label>
                  </div>
              </div>
              <div class="col l6">
                  <div input-field>
                      <input type="text" name="name" id="name" ng-model="resource.name" />
                      <label for="id">Resource Name</label>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col l6">
                  <h5>Location</h5>
                  <p>
                      <input type="checkbox" name="loc-1" id="loc-1" ng-model="resource.location1"/>
                      <label for="loc-1">Preschool</label>
                  </p>
                  <p>
                      <input type="checkbox" name="loc-2" id="loc-2" ng-model="resource.location2"/>
                      <label for="loc-2">Elementary 1-3</label>
                  </p>
                  <p>
                      <input type="checkbox" name="loc-3" id="loc-3" ng-model="resource.location3"/>
                      <label for="loc-3">Elementary 4-6</label>
                  </p>
                  <p>
                      <input type="checkbox" name="loc-4" id="loc-4" ng-model="resource.location4"/>
                      <label for="loc-4">High School 7-9</label>
                  </p>
                  <p>
                      <input type="checkbox" name="loc-5" id="loc-5" ng-model="resource.location5"/>
                      <label for="loc-5">Hig School 10-11</label>
                  </p>
              </div>
              <div class="col l6">
                  <h5>Status</h5>
                  <div class="input-field">
                     <select material-select name="status" id="status" ng-model="resource.status">
                         <option value="">Active</option>
                         <option value="">Inactive</option>
                     </select>
                  </div>
              </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat">Add</button>
          <button type="button" ng-click="cleanNewResourceForm()" class="modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
        </div>
     </form>
  </div>

Which is triggered by:

<a href="#md-newresource" modal class="btn-floating btn-large green waves-effect waves-light" data-dismissible="false">

When clicking the close button, the following error is thrown on console:

angular.js:13424 Error: [$compile:nonassign] Expression 'undefined' in attribute 'open' used with directive 'modal' is non-assignable! http://errors.angularjs.org/1.5.3/$compile/nonassign?p0=undefined&p1=open&p2=modal at angular.js:68 at parentSet (angular.js:9684) at parentValueWatch (angular.js:9697) at regularInterceptedExpression (angular.js:15419) at Scope.$digest (angular.js:16860) at Scope.$apply (angular.js:17133) at Object.complete (angular-materialize.js:859) at Array.e.hasClass.e.velocity.complete (materialize.js:3) at l (materialize.js:1) at k (materialize.js:1)

Any ideas as to what or why is this happening?

[SteveBunlon]

I'm facing the same problem, it looks like angular-materialize is trying to assing (to bind) a wrong value to the "open" variable. The fact is that in the librairy we can find this for the modal directive :

return { scope: { dismissible: "=", opacity: "@", inDuration: "@", outDuration: "@", ready: '&?', complete: '&?', open: '=', enableTabs: '@?' } ,

There we are trying to bind the "open" scope variable to the "open" HTML attribut. I don't know where and why, but the value of the open attribut is non assignable at a time. If I try to put a value to the HTML attribut, the error doesn't occur anymore.

So if you really want to avoid the error message in a short time, you can bind the "open" variable to a fake value.

Regards,

BUNLON Steve.

[webbiesdk]

This was fixed by #133

(But the fix didn't make it to bower until recently)

[geocine]

for some reason issue is still on 0.2.2

https://codepen.io/geocine/pen/ybNoqW/?editors=1010

any thoughts? I am trying to bind open property value of directive to open variable on controller scope .

[geocine]

I have figured this one out, instead of using it as an attribute. You need to use it as an element: two way binding will not work:

<button modal></modal>

https://codepen.io/geocine/pen/ybNoqW/?editors=1010

It works on other elements span, div, a .. but not on button

two way binding works:

<modal></modal>

https://codepen.io/geocine/pen/wdKpQm?editors=1010

[geocine]

I think this has something to do with attribute named open on a button:

This one is using open and two way binding it not working on a button:

https://jsfiddle.net/5mvoepyo/8/

This one, I replaced open with message and now two way binding is working on a button

https://jsfiddle.net/5mvoepyo/9/