TypeError: Cannot read property '$parent' of undefined

Question

angular-material-sidemenu version: 1.0.5

I am using gulp to build and serve my web app. When I am using gulp-serve the project is starting from my root/src/main/ folder and angular-material-sidemenu is working properly.

but when I do gulp-build, a build is getting generated and saved in root/build/www and angular-material-sidemenu is getting compressed and saved in vendor.js file.

<md-sidemenu-group>
  <md-sidemenu-button ui-sref="journal">
      <md-icon md-svg-src="content/images/PL_Services.svg">book</md-icon>
      <span data-translate="sidebar.menu.journal">journal</span>
  </md-sidemenu-button>
</md-sidemenu-group>

This is working correctly and journal state is loaded, but

<md-sidemenu-group>
    <md-sidemenu-content collapse-other="true"
            md-svg-icon="content/images/PL_Contacts.svg"
            md-heading="{{'sidebar.menu.contacts.title'|translate}}"
            md-arrow="true">
      <md-sidemenu-button ui-sref="contacts">
        <md-icon class="ng-binding ng-scope material-icons" role="img">
            person
        </md-icon>
        <span data-translate="sidebar.menu.contacts.view">View</span>
      </md-sidemenu-button>

      <md-sidemenu-button ui-sref="trustContact">
        <md-icon class="ng-binding ng-scope material-icons" role="img">person_add</md-icon>
        <span data-translate="sidebar.menu.contacts.new">
            Add
        </span>
      </md-sidemenu-button>
    </md-sidemenu-content>
  </md-sidemenu-group>

this is not expanding and showing the two buttons inside the md-sidemenu-content.

It's throwing error TypeError: Cannot read property '$parent' of undefined.

Edit:

Here is the controller code:

export default function() {

  this.visible = false;

  this.changeState = function() {

    if (!this.visible && this.collapseOther){
        var allmenu = document.querySelectorAll('.md-sidemenu-toggle');
        for (var i=0; i<allmenu.length;i++){

            angular.element(allmenu[i]).scope().$parent.$mdSidemenuContent.visible = false
        } 
    }
    this.visible = !this.visible;
  };

}

I don't see any element with class `md-sidemenu-toggle` and why are you mixing `javascript` with `angular` — manish, Jul 18 '18 at 06:09
It's the controller with `angular-material-sidemenu` component. And `md-sidemenu-toggle` get created when DOM is ready. So there is option called `auto-collapse` if it's set to true, then `angular.element(allmenu[i]).scope().$parent.$mdSidemenuContent.visible = false` is getting called and it's getting `angular.element(allmenu[i]).scope()` as `undefined` — KAsh, Jul 18 '18 at 07:13

TypeError: Cannot read property '$parent' of undefined

0 Answers0