Error: The property 'open' is not defined in the mdMenu object

Encountered a bug while working with angular-material design... When using md-menu, if a sub menu item is opened (as shown in the image) and then hovering over a non-subMenu item (menu item), it throws an error "Cannot read property 'open' of null" and remains highlighted even after hovering over other menu items, requiring a click to open the sub-menu-item.

Here is the code snippet:

<md-menu>
    <button ng-click="$mdOpenMenu()">menu</button>
    <md-menu-content>
        <md-menu-item>
            <md-button ng-click="---">menu item</md-button>
          </md-menu-item>
          <md-menu-divider></md-menu-divider>
          <md-menu-item>
              <md-menu>
                  <md-button ng-click="$mdOpenMenu()">sub menu</md-button>
                <md-menu-content>
                    <md-menu-item><md-button ng-click="---">sub menu item</md-button></md-menu-item>
                 </md-menu-content>
              </md-menu>
           </md-menu-item>
         </md-menu-content>
      </md-menu>

https://i.sstatic.net/wYoLh.png]2

javascriptangularjsangular-materialmean-stack

Answer №1

It appears that you have taken the sample code directly from the documentation, but unfortunately, these samples are not functioning as they should.

 <md-menu>
   <md-button ng-click="openMenu($mdOpenMenu, $event)">MENU</md-button>
   <md-menu-content width="4">
     <md-menu-item>
       <md-button ng-click="---">sub menu item</md-button>
     </md-menu-item>
   </md-menu-content>
 </md-menu>

Furthermore, in your controller:

 var originatorEv;
 scope.openMenu = function ($mdOpenMenu, ev) {
        originatorEv = ev;
        $mdOpenMenu(ev);
    };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting the json array value and populating it in a dropdown list in angularjs - a step-by-step guide!

{"id":1,"firstName":"John1","lastName":"Doe1","**accountIds**":[12345,12346,12347],"recipients":[{"accountNumber":22222,"firstName":"Mary1","lastName":"Jane1"},{"accountNumber":33333,"firstName":"Mary2","lastName":"Jane2"}]} Show the "accountIds" as a dro ...

javascriptarraysjsonangularjsrestful-url

Angular: Autocomplete field automatically shifts focus when an item is removed

I am currently working on an Angular 2 application that utilizes PrimeNG components. One of the UI features includes an autocomplete component with multi-select functionality (p-autoComplete) similar to the one showcased in the official documentation: < ...

javascriptcssangularautocompleteprimeng

Pulling down the data with Ajax "GET"

When a user clicks on a button, a zip file will be downloaded. I have the necessary components in place, but I am struggling to ensure they work together seamlessly. The "GET" call will retrieve byte content with the content type specified as application/ ...

javascriptajaxhttpwebfrontend

Is it possible to navigate to the Next page using a different button instead of the pagination controls

Is it possible to navigate to the next page upon clicking a button labeled "Press me"? Here is the code snippet: <!doctype html> <html ng-app="plunker"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/an ...

javascriptangularjs

Manipulate JSON insertions and character replacements using JavaScript or Python

I have a JSON file that contains an array of 500 objects. The structure of each object is as follows: { "books":[ { "title":"Title 1", "year":"2012", "authors":"Jack ; George", }, { "title":"Title 2", "year":" ...

javascriptpythonjson

ReactNative: When attempting to navigate, a TypeError occurred - this.props.navigation.navigate is not a function

It's confusing to see how this issue is occurring, even though all props have been properly typed. The goal is to pass the navigator to the bottom bar component in order to navigate onPress. Initially, I define the props interface: export interface B ...

javascriptreactjstypescript

What is the best way to dynamically insert an email value into a JSON file?

Here is the structure of my JSON file: test.json: { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b8a1baa093beb2babfbabdb2a7bca1fdb0bcbe">[email protected]</a>", "password": "Sanju@143", ...

javascriptjson

Deciphering key-value pairs that are separated by commas

I am looking to convert the following format: realm="https://api.digitalocean.com/v2/registry/auth",service="registry.digitalocean.com",scope="registry:catalog:*" Into this JSON object: { realm: "https://api.digitaloce ...

javascriptnode.jstypescript

Error message: It seems the spatial reference for this ESRI object is missing

Currently, I am utilizing Esri GIS to load the center location from an address. However, I am encountering an issue as I am using a geocoder from Google to obtain longitude and latitude, which is resulting in the following error message: TypeError: this.s ...

javascriptarcgisesri

Expressjs route encountering issue with imported database function failing to return a value

Currently, I am in the process of creating a REST API using Expressjs. Initially, all routes were integrated into one main file. However, I have now separated these routes, database connection, and database methods into their individual files. login-db.js ...

javascriptnode.jsexpress

In Rails 3, you can utilize JavaScript to submit a form_tag remotely, however ensure that it submits as

I am trying to implement a form_tag in rails 3 that can be submitted using ajax instead of html through javascript. Despite setting the form to submit as javascript, it still submits as html when clicking the submit button. - form_tag({:controller => " ...

javascriptruby-on-railsajaxruby-on-rails-3forms

I could not retrieve data from the Promise {} object

Currently, I am in the midst of developing a discord bot using discord.js. When attempting to retrieve the target user, I utilize the following code: let target = message.guild.members.fetch(id). This method yields either Promise { <pending> } if the ...

javascriptdiscord.js

Adjust width based on value dynamically

I currently have a div that is sized at 250px, housing 3 child divs within it. My goal is for each of these 3 divs to dynamically scale based on their respective values, eventually reaching 100% width. This is the code snippet I am working with: <di ...

javascriptreactjsmath

Once I've located the correct document, how can I search for the object with the specific date and then modify it in mongoose?

I am currently working on creating a heatmap using react-d3-heatmap, and the data structure required for this is [{date: Date, count: Number}]. Below is the schema I have set up for this model. const HeatMapSchema = new mongoose.Schema({ user: {type: ...

javascriptnode.jsmongodbexpressmongoose

Construct an array through the power of Ajax

Currently, I am facing an issue with building an array using ajax. The 'test' array is structured correctly, but the 'translations' array has a flawed structure (as seen in my console output). In Chrome console: In Edge console: In F ...

javascriptarraysajax

What is the best way to restrict datalist options while preserving the "value" functionality?

After finding a creative solution by @Olli on Limit total entries displayed by datalist, I successfully managed to restrict the number of suggestions presented by a datalist. The issue arises from the fact that this solution only covers searching through ...

javascripthtmlhtml-datalist

Rotating an image as it approaches the footer: a step-by-step guide

I'm trying to add a navigation arrow on my website that will rotate to point to the top when it reaches the footer. When clicked on, it should scroll back up to the top. The arrow already has a scrolling effect, but I need help figuring out how to m ...

javascripthtmlcss

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss

Automatically navigate to a different page using JavaScript after 5 seconds without interrupting the execution of other code

Is there a way to redirect to a specific URL after 5 seconds without halting the execution of other code on the page? I want all the other code to run first before triggering the redirection. Wrapping the entire page in a setTimeout block is not an option. ...

javascripthtmlasynchronoustimeoutsleep

Python.Selenium. Unable to locate current element. Techniques for switching frames

I am trying to collect feedback from a specific page at this URL. After waiting for the page to load, I attempted to locate elements using Google Chrome inspector. However, Selenium is unable to find these elements, and I also could not find them in the p ...

javascriptpythonseleniumxpath