Incorporating a self-invoking anonymous function to enhance Sir Trevor within an AngularJS framework while also making use of

I recently started working with AngularJS and I have an App where I am using the Sir Trevor content editor. I want to add some custom blocks to the editor by extending it, but I am having trouble accessing angular services within my extension code. The extension code is currently inside a Self-Executing Anonymous Function in a separate file.

(function() {

    // check SirTrevor exists...
    if(SirTrevor){

        SirTrevor.Blocks.NewBlock = SirTrevor.Block.extend({

        // adding custom functionality

        })

        SirTrevor.Blocks.AnotherNewBlock = SirTrevor.Block.extend({

        // more custom functionality

        })
     }

})()

I need to be able to use angular services within this code, but simply passing them as arguments to the function does not work. I am looking for a way to execute this code so I can access and inject angular services. I have ruled out using a directive, factory, or service for various reasons. Any suggestions on how to achieve this?

Any ideas on how I can access angular services in this context without modifying the SirTrevor.js file, as it might get overwritten during updates or installations?

javascriptangularjs

Answer №1

Indeed, you are correct. This pertains purely to configuration and does not align with any component below.

  • Directive, which handles DOM manipulation
  • Service, which provides a singleton object that can be instantiated with the new operator.
  • Factory, which also returns a singleton object.

While it may function within a .config() block, I recommend utilizing a .run() block instead. Refer to the Module documentation for more details.

Illustration

(function(angular, SirTrevor) {

    angular.module('myApp', [])
        .run(['$http', function($http) {

            // Angular injects $http.

            if (SirTrevor) {
                SirTrevor.Blocks.NewBlock = SirTrevor.Block.extend({
                    // Define functionality here...
                });

                SirTrevor.Blocks.AnotherNewBlock = SirTrevor.Block.extend({
                    // Define functionality here...
                });
            }
        }]);

})(angular, SirTrevor);

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

What kinds of data types does MongoDB support in JavaScript?

Regarding the mongodb node client, it allows insertion of JavaScript data using the following syntax: collection.insert({ alpha: 123, bravo: "hello", charlie: [1, 2, 3], }) I am curious to know if mongo supports newer JavaScript data types ...

javascriptnode.jsmongodb

What is the process for creating a three-dimensional Bezier curve using JavaScript, specifically with three.js and WebGL?

I have a good grasp on creating a simple bezier curve, but I am curious about how to transform the curve into 3D. Additionally, I am wondering if it is possible to plot multiple curves to form an image like a cone. Any advice or guidance on this matter wou ...

javascripthtmlthree.js

Tips for using ng-repeat in AngularJs to filter (key, value) pairs

I am trying to achieve the following: <div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:hasSecurityId"> {{k}} {{v.pos}} </div> </div> Code snippet for AngularJs: function TestCtrl($scope) { ...

javascriptangularjsframeworksangularjs-ng-repeatangular-filters

Struggling to input data into Excel using Selenium WebDriver

I encountered an issue while attempting to write two strings to an Excel sheet using the following code. The error message I received was: java.lang.IllegalArgumentException: Sheet index (0) is out of range (no sheets) FileOutputStream fout=new FileOutput ...

javascriptjavaexcelselenium

The complete guide to effectively concealing double arrows within a Bootstrap 4 custom-select component

If you're looking to hide the double arrow on the right of the bootstrap 4 custom-select field, there have been solutions provided here. However, even after implementing those changes, the text on the right-hand side still gets obscured by the opaque ...

javascripthtmlcssbootstrap-4

Utilizing jQuery and Isotope for intricate filtering

My isotope instance contains elements with multiple parameters, as shown below: <element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5" Filtering for an element that has A1, B2, and C3 is straightforward: .isotope({ filter: '[data-a~=1 ...

javascriptjqueryjquery-selectorsjquery-isotope

Troubleshooting problems with sending data in Jquery Ajax POST Request

I've spent a considerable amount of time searching for a solution to why my post request isn't sending its data to the server. Oddly enough, I can successfully send the request without any data and receive results from the server, but when attemp ...

javascriptajaxjquerypost

What is the best way to create a loop within a JavaScript function?

I'm having some trouble with looping inside a function. It seems like my looping is not working properly and I need help fixing it, along with suggestions for the problem. :) Here's what I've tried: <script> function getImage1( ...

javascriptphp

Having trouble with object initialization in a jQuery GET request?

Looking to create an HTML button using jQuery that, upon clicking the chart button, will retrieve values from specified text inputs. These values will then be used to construct a JSON object which will subsequently be included in a GET request. $(".chart" ...

javascriptjqueryjsonobjectinitializer

Using NVD3.JS Angular Directives to Showcase Dates

Currently, I am utilizing Nvd3 angular directives () specifically focusing on the sparklines component () I wish to showcase the date as day & month instead of a timestamp. Is it necessary to alter the directive itself or is there a way to directly modify ...

angularjsdatenvd3.js

Javascript: Troubleshooting Unexpected Variable Behavior in HTML Code

My issue is as follows: I am attempting to retrieve text from a JSON file in my HTML. In the header of my HTML, I have linked a tag with the following code: var language = ""; var langDoc = null; //Function to change the value function setLang() { v ...

javascripthtmljsonvariablesnull

Vue.js computed property fails to initiate

Why is the Vue JS computed property not triggered with this markup? <!-- language: lang-html --> <p>£{{plant_price}}</p> <div v-if="selected.plant.variations.length > 0 "> <select v-model="selected.plant.selected_ ...

javascriptvue.jsvuejs2vue-component

Ways to conceal a div element when the JSON data does not contain a value

If the value in "desc" is empty, then hide <div24> and <popup-desc>. html <div class="popup"> <div class="popup-top" style="background-color: '+e.features[0].properties.fill+';"> ...

javascripthtmlcssjson

Ways to store debug logs in a file within my project

In the project I am currently working on, I incorporate the Debug package which can be found at https://www.npmjs.com/package/debug. As part of this setup, I have set an environment variable (variable name: DEBUG & value:*). As a result, I am able to vie ...

javascriptnode.jsnpm

Node.js powered file uploading on the Heroku platform

After attempting to upload a file to Heroku using https://www.npmjs.com/package/express-fileupload, I encountered an error. It worked fine on my PC, but on Heroku, I received the following error message: {"errno":-2,"code":"ENOENT","syscall":"open","path" ...

javascriptnode.jsexpressheroku

Having trouble with AngularJs and moment.js integration?

Looking to create a simple webpage using Angular Js for date calculations. Utilizing moment.js from http://momentjs.com/ Below is the current code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ...

javascriptangularjsmomentjs

NestJs Custom Validation Pipe: Exploring the Possibilities with Additional Options

I have created a unique custom validation pipe and I am looking to enhance it with additional custom logic. How can I extend the pipe to allow for the options listed below? After reviewing the Github link provided, I have implemented my own version of the ...

javascriptnode.jsnestjs

Label positioning for checkboxes

Is there a way to display the checkbox label before the actual checkbox without using the "for" attribute in the label tag? I need to maintain the specific combination of the checkbox and label elements and cannot use nested labels or place other HTML elem ...

javascripthtmlcsscheckbox

When using child_process to run a Python script in Node.js, a promise may not resolve properly if the process exits before all

Currently, I am facing an issue while trying to execute sublist3r within a node app. The script runs successfully but only displays the banner before abruptly exiting after about 5 seconds. Typically, the script should interact with the web and take approx ...

javascriptpythonnode.jses6-promisechild-process

When trying to use the `map: texture` with a new `THREE.Texture(canvas)

i'm trying to apply the texture from new THREE.Texture(canvas) to the PointsMaterial, but it's not working as expected. The canvas appears on the top right corner, however, only white points are visible in the CubeGeometry. var texture = new ...

javascriptcanvasthree.js