Attempting to manipulate the selected tab material using a custom directive with two-way data binding

I've been struggling to change the tab using code and can't seem to figure out what's causing the error. It works fine when I use the controller to change the variable, but when trying to bind it through a directive, it breaks.

var app = angular.module('MyApp', ['ngMaterial']);
app.controller('HelloCtrl', function($scope) {
  $scope.selectedTab = 0;
});
app.directive('something', function() {
  return {
    restrict: 'E',
    template: '<div ng-click="changeNavigation()">Change Navigation</div>',
    scope: {
      selectedTab: '='
    },
    controller: function($scope) {
      $scope.changeNavigation = function() {
        console.log('Hello World');
        $scope.selectedTab = 2;
      };
    }
  };
});

You can see the code with the error on CodePen here: http://codepen.io/piyushchauhan2011/pen/rVRqeV?editors=101

The error can be seen in this image: https://i.stack.imgur.com/LG1VQ.png

Answer №1

Update the parameter in your directive from selectedTab="selectedTab" to selected-tab="selectedTab".

Check out this functional demo: http://jsfiddle.net/2yd9u7b9/

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

Chrome App Experiencing Issues with DOM Loading

I am working on converting a simple HTML5 Snake game that utilizes canvas into a Chrome App. Below is the snippet of my original HTML file: <!DOCTYPE html> <html> <head> <title>Snake</title> <link rel=" ...

When using SuperTest, the Authorization header value may unexpectedly return undefined

Currently, I am working on writing tests using Mocha, Supertest, and Chai. In order for my API's to function properly, they require an Authorization header which can be obtained from req.headers["authorization"]. Below you will find the current setup ...

The Vue component's data function is currently devoid of content

I've defined a Vue.js component as shown below: module.exports = Vue.component('folder-preview', { props: ['name', 'path', 'children', 'open'], template: `... `, methods: mapActions([ ...

Discover the steps to display a user's username following a successful login utilizing Passport.js

I want to display the message "Welcome back "username here" " to a user after they have logged in successfully on the website. The issue is that logging in with passport is not a typical request and response process, as the authentication occurs within th ...

A guide on tallying entries in mongodb

I am new to working with mongodb. Currently, I have a basic email Schema set up as shown below: const emailSchema = new Schema({ from:{ type: String }, to: { type: String }, subject: { type: String }, content: { type: String ...

What is the best method for waiting on a JavaScript function to provide a response utilizing the Chrome.storage API?

I am attempting to utilize the given code for managing name value pairs in a Chrome Extension. if (!this.Chrome_getValue || (this.Chrome_getValue.toString && this.Chrome_getValue.toString().indexOf("not supported") > -1)) { this.Chrome_getV ...

issue with node callback function - code malfunctioning

I have written a script in Node.js and Express to send an email after a SQL transaction is successfully completed! router.post('/',function(req,res,next){ sql.connect(config).then(function() { var request = new sql.Request(); ...

Dormant versus dynamic PHP MySQL operations

I am facing an issue where the state doesn't change from active to inactive or vice versa when I click on it. Below is my code for ajax: <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> ...

Connecting an onclick event to trigger an external file

I have a scenario where I need to link an array of buttons with respective mp3 files. For example, if button number 5 is clicked, the 5th mp3 file should be played. How can I modify the code below to achieve this functionality? Any examples or suggestions ...

Creating a personalized scrollball feature within a fancybox

Within my fancybox, I have a section with images that require a scroll bar. I currently have a scroll bar in place, but I am interested in implementing an anti-scroll (custom scrollbar) instead. I came across one option at https://github.com/Automattic/an ...

When the button is clicked, update the text within the <script> tags utilizing jQuery, JavaScript, or PHP

Here is the code snippet where changeme represents the text that needs to be replaced upon clicking a button: The following HTML and JavaScript code demonstrates this functionality: 1) Any input provided by the user in the field will be captured, replaci ...

Retrieve the value of a duplicated object key from a JSON and replace it with just one unique value

In my current project, I am faced with the challenge of extracting duplicate object keys' values from a JSON dataset and replacing them with only one value. My goal is to ultimately return these unique key-value pairs as an array. NOTE: This data has ...

Exploring the JSON structure

Struggling to come up with a solution as I am limited by certain restrictions. I need to create a mobile navigation system using a JSON object provided by the proprietary server. The only allowed framework is jQuery 1.12.4, no other frameworks or updated v ...

Ways to avoid browser refresh when uploading files in React applications

I'm working with a simple file upload form in React using hooks. import React, { useState } from 'react'; import { FlexContainer } from '@styles/FlexContainer'; const TestUpload = () => { const [file, setFile] = useState<F ...

Can you explain the concept of injection context within Angular version 16 and later?

I have come across the term "Injection context" and am trying to understand what it entails. In Angular, there are several things that are connected to injection context: EnvironmentInjector#runInContext injectionContext runInInjectionContext inject() Fr ...

Is it possible to combine the outcomes of a SQL query that produces numerous entities with identical identifiers?

Currently working on my first Node.js API project. Within the '/posts' endpoint, I am receiving data in this format: [ { "POST_ID": 1, "POST_TITLE": "Post N.1", "POST_DESCRIPTION" ...

React JS BlueprintJS Date Range Picker not functioning as expected

I am struggling to implement a DateRangePicker using BlueprintJS on my component, following the instructions in the documentation. I also want to include a RangePicker similar to the one shown in this screenshot. I have successfully installed all the nece ...

Unraveling the mysteries of this PHP-generated object

Need help with iterating over a JSON object generated by PHP code in response to a web service request. Looking for guidance on rendering sub-objects in a select list, especially those with value indexes. Can someone provide assistance on populating a sel ...

What's the most effective method for looping through a substantial array in order to save data into SQLite using Node.js?

Let's consider a scenario where I am inserting data into a table using a for loop like the example below: ... for(let i=0;i<data.length; i++){ db.run(`INSERT INTO db (a, t, p, q, bM) VALUES (?, ?, ?, ?, ?)`, [data[i].a, data[i].t, data[i].p, da ...

What is the best way to handle passing the "img" object to an onload event handler in ReactJS JSX?

I am currently working on an img element that I want to be able to listen for the onLoad event. However, I also need access to the image object itself in order to check properties like width and height. Since these images are generated dynamically, I won&a ...