Angular directive ng-template serves as a component type

In the code snippet below,

<!DOCTYPE html>
    <html>
        <head>
            .....
        </head>
        <body ng-app="app">
            <script type="text/ng-template" id="my-info-msg.html">
                <strong>{{o.msg}}</strong>
            </script>
            <div ng-controller="emp as o">
                <div my-info-msg>

                </div>  
            </div>
        </body>
    </html>

var app = angular.module("app", []);

function MyController(){
    this.msg= 'This is a message';
}
app.controller('emp', MyController);


function MsgDirective(){
    return{
        template1Url: "my-info-msg.html"
    };
}
app.directive('myInfoMsg', MsgDirective);

The custom directive my-info-msg is failing to insert the template

<strong>{{o.msg}}</strong>
into the
<div my-info-msg> </div>
.

I am in need of assistance, please help!

Answer №1

Upon closer inspection by @emil.c, it appears that there is a typo present in your code:

templateUrl: "my-info-msg.html"

After removing the "1" from template1Url, the code functions as intended.

https://plnkr.co/edit/Q20v7zSHHVPNJOOievrm?p=preview

Answer №2

If you notice an error in the template1Url, simply take out the number 1 from between template and Url. Once corrected, everything should work properly.

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

"Upon refreshing the browser, an Angular map loses its positioning and appears blank

I have implemented a LeafLet map in my Laravel 9 system, which is functioning properly with some exceptions. Here's how it looks like: https://i.stack.imgur.com/kcuVr.jpg The code in the controller (CompetitionsMapController.php) is as follows: ...

I am interested in utilizing angular 4 ng2-ui/map with places-auto-complete functionality that is restricted to a specific country

Check out my code snippet below: <input class="form-control" placeholder="Pickup Location" places-auto-complete (place_changed)="pickupChanged($event)" formControlName="pickup_location" [types]="['geocode']" /> I am trying to figure out ...

What is the best way to import all Vue3 components asynchronously?

I've been struggling to get the components to work properly. My goal is to store component names in an array, import them asynchronously, and then somehow assign them to app.component. I've spent about six hours on this and just can't seem t ...

Managing HTML5 Video in a slider

I've designed a unique video slider that cycles through 4 videos. Each video has a custom play button and additional overlay content. Once the video starts playing, the overlay content and play button fade out to reveal the default video controls. The ...

Issue with AngularJS filter not functioning properly

I have a specific situation where I am using an ng-repeat directive in the following manner: {"ng-repeat" => "city in cities() | filter: search"} In this context, each city object is structured like so: { attributes: {name: 'Boston'} } Furt ...

What distinguishes node from node js?

Following the instructions on https://nodejs.org/en/download/package-manager/, I installed Node.js. Upon checking the current version using: :~/Downloads$ nodejs -v I discovered that I was running v4.2.6, which is an older version. Deciding to update, I ...

Encountering vulnerabilities during the deployment of my React App using NPM has presented a challenge

Just starting out with React Js and seeking some guidance. I've developed a small React app that filters team members based on text input, and it's running smoothly in the development environment when I start NPM. Please review my project and poi ...

Unable to interact with buttons located in the title bar of the Electron application

I am currently working on developing a basic Text Editor using Electron. I am facing an issue with adding a custom title bar where the buttons are not clickable. To try and fix this issue, I have included an onclick tag to the buttons in my code. main.js ...

Retrieving data from a radgrid with the power of jQuery

Trying to extract the text from the label GetName in a radgrid using jQuery. Need to iterate through each record to check the value of the label. Can anyone provide assistance? Thanks! Below is the code for my radgrid. <telerik:RadGrid ID="Gridview1 ...

JQuery failing to trigger AJAX function

I'm struggling with what seems like a simple issue and it's driving me crazy. The problem lies in this straightforward section of the website. I have a .js file that uses ajax to save a post into the database when the submit button is clicked. A ...

Is there a way to convert an empty string to zero in MySQL?

Can you help with answering my question? My question pertains to saving an empty string "" value in my table and storing it as a 0 value in the MySQL database. Here is a visual representation: Table -> MySQL "" 0 Thank you for your assi ...

A visually stunning image showcase with dynamic resizing and strategically placed white spaces using the m

I'm attempting to create a responsive image gallery using the Masonry jQuery plugin, but despite reading numerous articles and forum posts on the topic, I can't seem to get it to work properly. The gallery is displaying many blank spaces. My app ...

Techniques for transferring child properties and values to parent components upon the screen being initialized

Is there a way to pass property values from a child component to a parent component when the react app is first loaded? In my scenario, I have a parent component named app.js that renders a home component containing a JSON component. Initially, upon loadi ...

What do you mean my cookie isn't working?

I'm going crazy over this! There's a cookie that was set from a response header with the sessionid, visible in dev tools on Chrome and Firefox, but document.cookie shows an empty string. This is what the cookie looks like: Name: sessionid Value ...

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

Please input new items by clicking a button

I have a dilemma with handling an array of objects in my Vue component. I am using v-for to display the objects, but now I want to update certain items in the array and save only those changes in a new object. Currently, when I attempt this by mapping over ...

What are the steps to install the LTS release of NodeJS if Node 10 is already installed on my system?

Several weeks ago, I installed Node version 10.11 on my computer. However, a repository I am working with requires me to have the LTS version of Node, which is currently 8.12. If I download the LTS version, will it interfere with my existing install, or ...

Struggling to start the node express server running

I'm trying to set up a node server using express to run nodemailer. My frontend is built with create-react-app - I believe there should be no issues in that area. I have a few questions: Why isn't my express server functioning properly? Why do I ...

The Javascript code is not running due to the XSS security measures in place

Within my Wordpress website, I have crafted an HTML form that enables users to view database records corresponding to their input. Following this AJAX tutorial on w3schools, a JavaScript function was implemented to send a GET request to a PHP script on the ...