加载AngularJS部分模板后如何应用jquery

发布时间：2020-12-17 07:48:19 所属栏目：安全来源：网络整理

导读：我有一个简单的网站来实现jQuery,以便在Index.html顶部横幅中创建一些带有一些图像的滑块. 现在,我想使用AngularJS,所以我将HTML代码分成不同的部分. 标题页脚热门横幅如果我在原始版本中运行Index.html(不应用AngularJS模式),那么我可以看到滑块工作完美

我有一个简单的网站来实现jQuery,以便在Index.html顶部横幅中创建一些带有一些图像的滑块.

现在,我想使用AngularJS,所以我将HTML代码分成不同的部分.

>标题
>页脚
>热门横幅

如果我在原始版本中运行Index.html(不应用AngularJS模式),那么我可以看到滑块工作完美.

当应用AngularJS模式时,我将顶部横幅HTML移动到部分html,然后将ng-view应用于顶部横幅最初位于的div.

var app = angular.module('website',['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
    when('/about',{templateUrl:'app/partials/about.html'}).
    when('/contact',{templateUrl:'app/partials/contact.html'}).
    otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});

当我刷新页面时,滑块不工作,呈现为简单的html没有任何jQuery效果,真的是一团糟.

这个部分有一些通常由document.ready激活的jQuery插件.但是当角度负载部分在ng视图中时,此事件不会触发.我如何调用这个事件来初始化jQuery插件？

任何线索如何解决这个问题？

欣赏任何帮助.

当您指定路线时,您还可以指定控制器,因此您的路线将如下所示：

var app = angular.module('website',['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
        when('/about',{templateUrl:'app/partials/about.html',controller: 'aboutCtrl'}).
        when('/contact',{templateUrl:'app/partials/contact.html',controller: 'contactCtrl'}).
        otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html',controller: 'homeCtrl'})
    });

现在,您可以在每个控制器内部定义要做的事情,jquery-wise,作为函数的一部分,如下所示：

angular.module('website').controller('aboutCtrl',['$scope',function ($scope) {

   $scope.load = function() {
       // do your $() stuff here
   };

   //don't forget to call the load function
   $scope.load();
}]);

合理？

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!