Question

我正在尝试使用JQuery（以及许多其他插件）将AngularJS添加到现有模板中。目前这是一个非常糟糕的失败，我已尽我所能让它发挥作用。具体来说，所有“点击更改”按钮都不起作用。

以下是它应该是什么样的：http://www.shutterstiles.com/alpha/product-details-style5-2.html

以下是它的作用：http://www.shutterstiles.com/alpha/#/product-details

您可以看到没有任何按钮按预期工作，甚至图像也无法加载。我在控制台中没有任何错误，所以我完全迷失了。我已经尝试更改订单的负载，但这没有帮助。

有什么明显的东西我做错了吗？我知道我不应该将AngularJS与JQuery一起使用，但我正在尝试将两个应用程序集成到一个应用程序中。

TLDR;试图使用angularjs-route来处理为jquery编写的模板。

编辑1：

这是我写的主要控制器/路由，试图在保持页眉/页脚相同的同时注入页面。我认为这打破了其他页面上的JQuery，因为如果我删除它就会开始工作。

    var mainApp = angular.module("mainApp", ['ngRoute']);

    mainApp.config(function($routeProvider) {
        $routeProvider
            .when('/home', {
                templateUrl: 'home.html',
                controller: 'MainController'
            })
        .when('/cart', {
                templateUrl: 'cart.html',
                controller: 'MainController'
            })
        .when('/account-1', {
          templateUrl: 'account-1.html',
                controller: 'MainController'
        })
            .when('/category', {
          templateUrl: 'category.html',
                controller: 'MainController'
        })
            .when('/product-details', {
          templateUrl: 'product-details.html',
                controller: 'MainController'
        })
            .otherwise({
                redirectTo: '/home'
            });
    });

    mainApp.run(function($rootScope, $location, $anchorScroll, $routeParams) {
      $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
        $location.hash($routeParams.scrollTo);
        $anchorScroll();
      });
    })
    //This controller is the main controller of the entire website
    mainApp.controller('MainController', function($scope, $route) {
      $scope.isIndexPage = function() {
        return $location.path() === '/';
      }
      $scope.$on('$routeChangeSuccess', function() {     //Initialize sliders
            initSliders();
      });
    });

    //Initialize sliders
    function initSliders() {
        jQuery.fn.exists = function(){return this.length>0;}

        if ($('.slider-v1').exists()) {
            $('.slider-v1').cycle({             //Specify options
                    fx: 'scrollHorz',
                    //Name of transition effect
                    slides: '.slider-item',
                    timeout: 5000,
                    // set time for nex slide
                    speed: 1200,
                    easeIn: 'easeInOutExpo',
                    // easing
                    easeOut: 'easeInOutExpo',
                    pager: '#pager2',
                    //Selector for element to use as pager container
            });
        }
        if ($('.slider-v2').exists()) {
            $('.slider-v2').cycle({
                    //Specify options
                    fx: 'scrollHorz',
                    //Name of transition effect
                    slides: '.slider-item',
                    timeout: 5000,
                    // set time for nex slide
                    speed: 1200,
                    easeIn: 'easeInOutExpo',
                    // easing
                    easeOut: 'easeInOutExpo',
                    pager: '#pager',
                    //Selector for element to use as pager container
            });
        }
        // show loading image
        if ($('#loader_img').exists()) {
            $('#loader_img').show();
        }
        // main image loaded
        if ($('.sliderImg').exists()) {
            $('.sliderImg').load(function () {
                    // hide/remove the loading image
                    $('#loader_img').hide();
                });
        }
    }

将AngularJS添加到现有JQuery模板

0 个答案: