Getting attribute values from custom tags in AngularJS is a common task that can be

I am new to AngularJS and I'm having trouble with my code. I am attempting to retrieve the attribute value of post-id from my index.html file and display it in the console from my controller.

Here is a snippet from my index.html:

<post-creator post-id="5" category="1"></post-creator>
<script src="components/post-creator/post-creator.component.js"></script>

The code in my post-creator.component.js file looks like this:

function controller($http) {
        var model = this;

        model.$onInit = function () {
            console.log("ID: " + model.postId);
        }
module.component("postCreator", {
        templateUrl: "components/post-creator/post-creator.template.html",
        bindings: {
            value: "<"
        },
        controllerAs: "model",
        controller: ["$http", controller]
    });

Answer №1

When including post-id="..." category="..." in your HTML, it is important to add them as part of the bindings object within your component, rather than as a standalone value. Here is how it should be structured:

bindings: {
    postId: "<",
    category: "<"
}

Below is an example demonstrating this concept:

var module = angular.module("myApp", [])

function controller($http) {
  var model = this;

  model.$onInit = function() {
    console.log("id again:" + model.postId);
  }
}

module.component("postCreator", {
  template: "<div>post creator</div>",
  bindings: {
    postId: "<",
    category: "<"
  },
  controllerAs: "model",
  controller: ["$http", controller]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp">
  <post-creator post-id="5" category="1"></post-creator>
</div>

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

Having trouble retrieving the value of the hidden field using ng-model

Hello, I'm currently learning AngularJS and facing some challenges with accessing hidden field values using ng-model. Specifically, I am working on an editing modal where I need to retrieve the ID for each record. Below is my controller code snippet: ...

How can I make a polygon or polyhedron using Three.js?

Is it possible to generate polygon or polyhedron shapes in three.js using alternative methods? var customShapePts = []; customShapePts.push( new THREE.Vector2 ( -50, 200 ) ); customShapePts.push( new THREE.Vector2 ( 100, 200 ) ); customShapePts.push( ne ...

Using AngularJS Controller with Laravel 5's Eloquent Model Object

I have recently started working with AngularJS on a project involving Laravel 5 and AngularJS. My goal is to update the standings based on certain filters. This is how I am making the API call: $http.post('/api/standings', { category: ...

"I am encountering an issue where I am using React and Express to retrieve data from a database, and although I am able to return an array of

I am working on a React app that communicates with an API using Express. Currently, I am using the GET method to fetch data from a database, and my fetching code looks like this: const posts = []; fetch(URL) .then(response => response.json()) .then(jso ...

Achieve a "upload file" button

I am trying to create an add file button within a sidebar of a standard editor. Here are the steps involved: There is a + button. When clicked, it reveals an input field. The user enters the name of the new file and presses enter on the keyboard to s ...

AngularJS not displaying loader during AJAX request

While utilizing ajax requests with $http, there seems to be a delay due to the server operation taking longer than expected. I have implemented a loader to display while processing the request, but unfortunately it is not showing up on the page. Even after ...

Creating a smooth JQUERY fade slideshow with seamless transitions, no white gaps in

I am having trouble with the slideshow on my Wordpress website www.2eenheid.de. I want the images to fade smoothly between each other instead of fading into a white background color first and then into the next image. Can anyone help me find a solution for ...

Crockford's method of replacing values with nested objects

/** Custom Supplant Method **/ String.prototype.customSupplant = function(obj) { return this.replace (/{([^{}]*)}/g, function (match, propPath) { var props = propPath.split('.'); var result = obj; f ...

What is the best way to eliminate the border of an expansion panel in Material-UI?

Is there a way to eliminate the border surrounding the expansion panel in Material-UI? ...

The main.js file will be served by nodeJS using express

After developing a nodeJS server using express, I encountered an issue where the server was only delivering the index.html file and not the accompanying main.js file. Both files are located in the same directory. app.get('/', function (req, res) ...

Unable to retrieve a response, the operation `users.findOne()` has exceeded the buffering time limit of 10000ms

I encountered an issue when attempting to make a POST login request. The frontend is deployed on Netlify here, and the backend is deployed on Heroku here. Here are my backend logs . I am receiving `users.findOne()` buffering timed out after 10000ms in ...

Tips for populating countryList data in Form.Select component within a React.js application

I have a data file that contains a list of all countries, and I need to display these countries in a select input field, similar to what you see on popular websites when a user logs in and edits their profile information like name, address, and country. H ...

Submitting a Form with Multiple Pages

I'm encountering a challenge that I'm struggling to work through. Initially, we had a professional build our website, but since parting ways with the company, I've taken over site management. While I can handle basic tasks, I lack the expert ...

Incorporate a personalized style into the wysihtml5 text editor

Is there a way for me to insert a button that applies a custom class of my choice? I haven't been able to find this feature in the documentation, even though it's a commonly requested one. Here's an example of what I'm looking for: If ...

What is the method for obtaining the total number of steps taken in a day (pedometer) exclusively for the current day on the

Is there a way to retrieve the total steps count for the current day only? The tizen.humanactivitymonitor.setAccumulativePedometerListener function allows me to access the accumulativeTotalStepCount, which represents the cumulative walking and running ste ...

Removing undesired entries from a table view using AngularJs

In my table, there is a column called status which could have values like 'Open', 'Closed', 'Verified' and 'Rejected'. I am looking for a way to implement a filter in ng-repeat that will hide the rows with the statu ...

In JavaScript, the "this" keyword points to a different object

Here is a script that needs attention: Bla = function() { this.prop = 123; } Bla.prototype.yay = function() { console.log(this,this.prop); } X = new Bla(); $(document).ready(X.yay); // output: #document undefined --> why? $(document).ready(functio ...

"Enhance the appearance of bootstrap buttons by applying CSS to add shadow and border when the

Working on a frontend project using the React framework and Bootstrap 5.3 for design. Noticing that shadows are deactivated in Bootstrap by default, which means buttons don't display shadows when active as per the Bootstrap v5.0 documentation. Link ...

Mastering the art of horizontal scrolling within an angular material layout=row

I am attempting to create a slider using only a horizontal scrollbar with cards inside. In order to do this, I am trying to scroll the layout="row" within an ng-repeat. Check out my codepen here <body ng-app="myApp" ng-cloak ng-controller="ProductCont ...

What could be the reason for the lack of error handling in the asynchronous function?

const promiseAllAsyncAwait = async function() { if (!arguments.length) { return null; } let args = arguments; if (args.length === 1 && Array.isArray(args[0])) { args = args[0]; } const total = args.length; const result = []; for (le ...