Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker example here:

http://plnkr.co/edit/H0JJMYiFlwxlKQXOJgP5?p=preview

Just so you know, this is the pre tag I am using:

<pre class="prettyprint lang-cpp">
struct DLLNode {
    int data; 
    struct DLLNode *next; 
    struct DLLNode 'prey;
};  
</pre>

For some reason, after the ng-view is triggered, Google Prettify fails to work as expected. However, it functions correctly before that.

javascriptcssangularjsngroute

Answer №1

You can find the answer in a related discussion.

The solution involves creating a new directive:

app.directive('customPrettyPrint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              element.html(prettyPrintOne(replaceText(element.html()),'',true));
        }
    };
});

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

Unpacking the ng-checked directive

In the document ng-checked, there is an example provided at the bottom of the page where clicking on the first checkbox also checks the second box. My observation from this behavior is that even when the first checkbox is checked, the second checkbox can ...

angularjs

Bokeh is having trouble loading from the CDN

I am currently attempting to embed a plot along with its data by utilizing autoload_static within a straightforward html page that I wish to view locally on my computer. According to the documentation, all I need to do is place the .js file in the specifie ...

javascriptpythonhtmlbokeh

The method getManyAndCount() in TypeORM does not include related data in its return result

I'm completely new to TypeORM and NestJs. Currently, I am working on a project where I have an entity called VehicleModel which has a ManyToOne relationship with VehicleBrand. However, when I execute getManyAndCount() on my query, I am puzzled as to ...

javascripttypescriptnestjstypeorm

What is the best way to save a parsed JSON value to a variable in Express?

I am currently utilizing the body-parser module to parse incoming JSON objects within a POST request. My goal is to extract and store a specific value from the JSON data into a variable for later database insertion. Below is a fragment of the code: var h ...

javascriptjsonexpress

The Mysteries of Key Codes in JavaScript

I'm curious about the character codes used for keyboards. Recently, I came across an informative article discussing this topic. In particular, I am interested in finding out which key code to use when a user presses both the alt and down arrow keys s ...

javascripthtml

What is the correct way to navigate data through my Node.js API?

I am struggling with getting the JSON response to display at the /api/orders_count endpoint. Here is a breakdown of my setup: In my project, I have various files: Routes file - where the orders_count route is defined: routes/index.js const express = req ...

javascriptnode.jsapinode-fetch

Disabling Immediate Row Checkbox in Angular Datatable Based on Column Data

Is there a way to prevent the checkbox in a row from being checked based on certain column data? In my datatable, I need to implement a condition where if firstname="Superman", then the checkbox for that particular row should be disabled to preve ...

javascriptjqueryangulardatatablesangular-datatables

Tips for accessing a web service using JavaScript (AJAX)

I have two projects: one is a web service and the other is an ASP.NET web project. I am trying to insert data using JSON (with AJAX). I tested the web service file with code behind and it works fine, but I'm encountering an error with the JavaScript ...

javascriptc#jqueryasp.netajax

Sinon causing 'unsafe-eval' error in Chrome extension unit tests

Recently, I've been conducting unit tests on my Chrome extension using Mocha, Chai, and Sinon. However, I encountered an issue when attempting to stub an object from a method: EvalError: Refused to evaluate a string as JavaScript because 'unsafe ...

javascriptunit-testinggoogle-chrome-extensionsinonsinon-chai

There were no visible outputs displayed within the table's tbody section

import React from 'react'; export default class HelloWorld extends React.Component { public render(): JSX.Element { let elements = [{"id":1,"isActive":true,"object":"Communication","previ ...

javascriptreactjstypescript

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

javascriptreactjstypescriptreact-ref

What is the method for adding a prefix to every line in JavaScript?

I'm currently working on a React project and dealing with a string that may contain newlines. I'm looking for the most efficient way to inject a symbol at the start of each line. I've considered exploding the string into an array and adding ...

javascriptstringreactjs

Incorporating local JSON data into HTML: A Step-by-Step

I'm completely new to javascript and the utilization of json. What I want to accomplish is quite straightforward, although I am encountering difficulties. My objective is to create a website consisting of two pages: one that showcases artists and ano ...

javascripthtmljson

Steps to retrieve data (token) from developer tools and incorporate it into a fetch Post request

Is there a simple way to extract data using dev tools and insert it into a fetch request? I am trying to make a POST request through the console, but I am struggling to correctly copy a token. I attempted to use querySelector but instead of finding the t ...

javascripthtml

Unusual compilation issue encountered in Vue when trying to use a template for a slot

I encountered a strange issue where my Vue compiler was refusing to render the default named slot of a child component. Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first. Even my VSCode highlighted this problem a ...

javascriptvue.jsslot

Arranging sibling buttons to wrap seamlessly like text

Is there a way to turn every syllable of a specific phrase into clickable buttons while maintaining regular text wrapping behavior? For reference, in the first image each syllable is plain text, in the second they're wrapped in <span>, and in t ...

htmlcss

Utilize React-select in Nextjs to dynamically alter URLs through options

During my attempt to implement react-select for changing the URL based on user-selected multiple options to filter numbers, I encountered a challenge. When using multiple options, the URL changes successfully to fetch data, as seen in this example: https:/ ...

javascriptreactjsregexnext.jsreact-select

Angular directive using ng-if to display image

I have the following code in my showCtrl: $scope.showTeam = function(){ var count = 0; for (var k in subordinates) { if (subordinates.hasOwnProperty(k)) { ++count; } } if(count > 0){ r ...

angularjsangularjs-scopeangular-ui

When the navbar is expanded, a right-aligned image is visible; however, it becomes invisible when the

My website has a navigation bar with two logos - one in the left corner (the coat of arms) and one in the right corner (the scout lily), along with text links in between. The coat of arms uses the "navbar-brand" class. To see how it looks, click here: htt ...

htmlcsstwitter-bootstrapbootstrap-5

The @emit event in vue.js is not being received by the parent component

Within my application, there is a form located in the ManageCards component. This form includes a child component called ImageUpload, which emits an image file and its local URL to the parent component: <form class="mb-3"> <div class ...

javascriptvue.jsparent-childemitvue-options-api