The JS slider fails to function properly following the migration of AngularJS from version 1.0.8 to 1.2

Seeking assistance with migrating AngularJS from version 1.0.8 to 1.2 and encountering issues with a JavaScript slider that is no longer functioning post-migration...

After upgrading to 1.2, added the angular-route.js library and injected 'ngRoute' into my module, which is causing conflicts with the existing pure JS slider...

Provided below are Plunker examples showcasing the problem: Version 1.0.8: http://plnkr.co/edit/l4k3vgbqzHIpCTlzcwr6?p=preview

       var app = angular.module("calculatorApplication", []).config(function ($routeProvider) {

Version 1.2: http://plnkr.co/edit/qhf1YjlXMFwq0X8TgT21?p=preview

 var app = angular.module("calculatorApplication", ['ngRoute']).config(function ($routeProvider) {

Appreciate any suggestions or solutions to this issue. Thank you.

javascriptangularjsmigrationangularjs-ng-route

Answer №1

Within the file slider.html, you will find the following snippet of code:

<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true
  });
</script>

In AngularJS version 1.2, scripts included in templates do not run when inserted using directives such as ng-view or ng-include.

This issue has been resolved in AngularJS 1.2.2.

If upgrading to 1.2.2 is not an option, consider moving the code into a directive to ensure proper execution.

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

The validation feature is ineffective when used with Material UI's text input component

I need a function that can validate input to make sure it is a number between 1 and 24. It should allow empty values, but not characters or special symbols. function handleNumberInput(e) { const re = /^[0-9\b]+$/; const isNumber = re.test(e.target.val ...

javascriptreactjsregexvalidationmaterial-ui

What could be the reason for only one of my states being modified when I call my function?

Currently, I have a single state in React.js consisting of two key-value pairs for length validation and character validation: const [validation, setValidationState] = useState({ lengthValidation: "", characterValidation: "", }); These states are e ...

javascriptreactjsreact-hooks

Having trouble with AngularJS ForEach and REST/JSON calls using $resource before the JSON data is ready?

My goal is to iterate through a resource using a controller and output each item in the JSON array with conditionals added later on. However, I am encountering an issue where it returns as "undefined": pfcControllers.controller('pfcArticlesCtrl' ...

arraysjsonangularjs

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

Tips on customizing regex to selectively identify specific strings without capturing unrelated ones

Currently, I am working with this regex: /(?<=^|\/)(?:(?!\/)(?!.*\/))(.*?)[:-]v([\d.-]+)(?=\.|$)/ The goal is to extract the captured group from the following strings: rhmtc/openshift-velero-plugin-rhel8:v1.7.9-4 oc-mirror-plug ...

javascriptnode.jsregex

Guide to changing the checkbox value using JavaScript

Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...

javascripthtmloracle-apex

Is it necessary to run npm install when a package does not have any dependencies?

If I have an npm package that contains all its dependencies bundled into one file using webpack, and I unpack it into the directory ./my-awesome-package/, should I still run npm install ./my-awesome-package/? I am aware of being able to specify preinstall ...

javascriptnode.jsnpmnpm-install

What is the best way to emphasize an element on a webpage with Selenium and Python?

Recently, I inherited an existing selenium framework that utilizes Python for scripting. In order to aid in debugging and other tasks, I am interested in implementing a feature that highlights the element currently being acted upon (such as an input box, l ...

javascriptpythonseleniumautomation

Guide on syncing Bootstrap 4 sliders using a single set of controls

Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls? 1) When the control arrows are clicked, both carousels will slide simultaneously. 2) Hovering over either carousel will pause both carousels from slidi ...

javascripthtmlcssbootstrap-4

Scheduled Job unable to complete post request

(I am completely new to the world of JavaScript, node.js, and Heroku so I apologize in advance if my question is not very clear) I recently set up a Heroku node.js application with a scheduled task that should run every hour. The task does run as expecte ...

javascriptnode.jsherokuscheduled-tasks

Processing JSON Serialization from Controller to AJAX Response

I'm struggling to find the correct way to use an HttpWebRequest, and then convert its response into a readable format of JSON for a JavaScript AJAX function. If I just return the raw text, it includes escaping slashes in the response. If I deserializ ...

c#javascriptajaxjsonhttpwebrequest

Explore a vast array of items in a collection

I have a massive collection of various objects that I need to sift through. With over 60,000 elements, the search operation can sometimes be painfully slow. One typical object in this array has the following structure: { "title": "title" "company": ...

javascripttypescriptsearch

Error: Attempting to access 'scrollTop' property of null object in Material UI library

After updating from MUI-4 to MUI-5, I encountered this error. Can anyone provide assistance? ...

javascriptreactjsmaterial-ui

What does the single-threaded nature of JavaScript signify in terms of its intricacies and ramifications?

As someone relatively new to Javascript and JQuery, I recently discovered that Javascript operates on a single-threaded model. This has left me wondering about the implications it carries: What should be taken into account when writing JavaScript code? Ar ...

javascriptjquerybrowser

Exploring the concept of JavaScript nested promise scopes within the context of AngularJS

I've been struggling with JavaScript promises for the past few hours, trying to fix a problem that I just can't seem to solve. My knowledge of promises is limited, so I'm open to the possibility that my approach might be incorrect. Currentl ...

javascriptangularjspromiseangular-promise

React App PWA ERROR: Service worker not registered to control the page and start_url

I am encountering an issue while building a progressive web app using Create React App. Lighthouse benchmarking results in an error, indicating that my PWA is not installable. Surprisingly, I face the same problem even when utilizing the official PWA templ ...

javascriptreactjstypescriptcreate-react-appprogressive-web-apps

Error: The function named 'setValues' has already been declared

Looking for some guidance with an error message that involves the 'setValues' declaration in my code. I've come across similar questions and answers, but I'm still unsure about what changes I need to make. Your input would be highly app ...

javascriptreactjsnpmvisual-studio-code

ReactJS tables that can be filtered and sorted

Within my component's state, there exists an array named 'contributors'. Each element within this array is an object containing various properties. My goal is to present this data in a table format, with the added functionality of sorting an ...

javascriptreactjsfrontend

Displaying nested object properties in HTML through iteration

What is the correct way to access them if item.NestObj.textpropertyVal is showing incorrect? success: function(data){ var html = ""; $.each(data.mainOutterObj, function (index, item) { html += "<ul&g ...

javascriptjqueryjson

Every time I try to use AgGrid selectors, they consistently come back with null results, even though the

I currently have an ag grid in my application: <app-my-component> <ag-grid-angular [gridOptions]="gridOptions" (gridReady)="setGridReady()"> </ag-grid-angular> </app-my-component> When running Karma- ...

javascriptangularjasminekarma-jasmineag-grid