Encountering issues with loading ng-bind in Angular and Django

I'm having an issue with a basic angular file that is being served by django.. I can't seem to bind angular views.py

def home (request):
    return render(request,'index.html',{})

index.html

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

        <div ng-app="">

            <p>Input something in the input box:</p>
            <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
            <h1>Hello {{name}}</h1>

        </div>

    </body>
</html>

Even though this seems straightforward, my ng-model="name" doesn't seem to bind with the Hello {{name}}

If I open my index.html as a standalone HTML file, it works fine, but not when used within django

Can anyone assist with why this might be happening?

Appreciate any help in advance

Answer №1

If your HTML file is located within Django's scope, you can temporarily disable that scope for a specific section by using {% verbatim %} and {% endverbatim %}:

{% verbatim %}
    <p>Input something in the input box:</p>
    <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
    <h1>Hello {{name}}</h1>
{% endverbatim %}

Answer №2

To change the way angular recognizes expressions, simply update the delimiters used.

.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[');
    $interpolateProvider.endSymbol(']}');
});

Update your HTML code accordingly:

<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {[name]}</h1>

By making this adjustment, you can avoid the need to constantly use the verbatim tag to override django's default behavior.

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

Struggling to properly interpret the unrefined data from Typeform's webhook

Utilizing the webhook feature of Typeform to convert results to JSON when a user submits the embedded survey is working perfectly when tested with RequestBin. However, after exposing my local app using ngrok with the command ngrok http 3000 and setting t ...

Populating a drop-down menu with data from a JSON file using dat.gui

I am currently working on a drop-down menu using JavaScript. Below is the content of my JSON file: { "bg1":"assets/bg/people_bg.jpg", "bg2":"assets/bg/people_bg.jpg" } My goal is to assign the names bg1 and bg2 to the backgrounds in the dropdown menu, ...

Ways to incorporate ejs partials using JavaScript

I am currently developing code to determine if a user is logged in. Depending on the user's login status, the content of the "my user" section should vary. When a logged-in user navigates to the "my user" page, an if statement is executed to confirm ...

When attempting to create an ERD image for my database models in Django, I am encountering the error message """"

After setting up my database models, I decided to visualize my data by generating a structure for it. All the necessary packages have been installed successfully. Here is the list of packages that were installed using the pip command to generate the graph ...

Assistance with utilizing Google Sheets scripts for retrieving formulas is needed

I've been working on a small search tool in Google Sheets as a personal project to improve my skills and knowledge of GS. Munkey has been guiding me over the past few weeks and helping me develop my understanding. Below are the links to my "Database" ...

Server Error: Internal Issue (500)

Encountering an issue with this if(attributeName == 'id'){ var id = dataValue; $("#discard").click(function(){ alert(id); $.ajax({ url: 'deleteob/' + id }); }); } I've defined th ...

jQuery's event delegation feature fails to work in conjunction with AJAX requests

I'm currently facing issues with jQuery's on event delegation: Below is the code snippet I am working with: HTML portion: <body> <!-- Page Content Wrapper--> <div id="sb-site"> <div id="overlay">& ...

Transforming the elements within an expansive Canvas into a high-quality JPEG image

Is there a way to convert the contents of a large Canvas to JPEG format? I need to convert a large canvas, possibly around 1000x1000 pixels or larger, into JPEG format for uploading onto a server. If the canvas was smaller in size, I could have used canva ...

Having an issue with Angular's $http post method not returning the expected JSON

After successfully executing Recipes/CreateRecipe, the return Json is not providing any data and instead proceeds to the next function, triggering the alert message Error CreateRecipe null script $scope.createRecipe = function (recipe) { $http({ met ...

The margin of the parent container is influencing the margin of the child element

Purple Working on displaying a rectangle shape in a browser using divs in my React project. Everything works fine, but when I add margin to the parent base and then draw the boxes, there's some space between the mouse cursor and the actual box. The ...

The hierarchy of script loading in Angular applications

After years of working with MVC, I recently delved into Angular. Although I am well-versed in JavaScript and HTML, I'm still a beginner in the world of Angular. I spent hours troubleshooting my app only to realize that the problem was elusive. The a ...

Utilizing Cheerio for gathering data

Currently, I am working with Nodejs and utilizing the Cheerio package to extract data from a website. However, I am facing difficulties in storing this information into an array after iterating through it. The specific text I am aiming to gather is "Georg ...

What is the best way to extract HTML using selenium.webdriver in Python?

Appreciate your attention, and please excuse any errors in my English. I am currently attempting to retrieve HTML from . The process involves entering some text into an input box and clicking a button, which triggers the following actions: Load the Yaho ...

A step-by-step guide on integrating vuetify-component into codeceptjs

When attempting to write tests using codecept.js, I am facing difficulties accessing the vuetify components. <v-layout> <v-flex xs7> <v-text-field ref="video1min" v-model="video1min" :rules=" ...

React does not support the map function

I've been struggling for three days to figure out why I am unable to place multiple elements in an array. Interestingly, when I try to access only one element using this.state.dat.nombre or dat.carrera, it works perfectly fine. However, when I attempt ...

Leverage regular expressions to extract numbers preceding the final matched instance

Within my string of logs, I have the following: rgb(255, 255, 255) 0px 0px 0px 16px inset I am interested in extracting the dynamic value, which in this case is 16. How can I create a regex pattern that will capture the last instance of px, and then retr ...

Providing structured Express app to deliver HTML and JavaScript content

Currently, I am working with Express and facing a seemingly simple challenge. Here is the structure of my directories: |-config |---config.js |---routes.js |-server.js |-scripts |---controllers |------controllers.js |---directive ...

Reverse the Django non-rel action

After cancelling a deployment to Google App Engine (GAE) while using Django non-rel's manage.py deploy, I encountered an issue when trying to redeploy. The message displayed was "Another transaction is already in progress and use appcfg to rollback." ...

Store the complete dataset in the local storage

I am struggling to save a complete dataset in local storage. Currently, I can only store one option using the code below const medicalPlansArr = medicalAidPlans[0].selectedMAP.map((x, index) => ({ label: x.options[index].optionName, value: x.options[in ...

The expected rendering of column headers was not achieved following the refactoring of <Column />

After making changes, the header is not rendering properly and I cannot see the "Product ID" header for the column: // DataTable.tsx // React Imports import React, { useState } from 'react'; // PrimeReact Imports import { DataTable as DT } from ...