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

Question

我有一个简单的网站，它实现了 jQuery，以便创建一个 slider ，其中包含 Index.html 顶部横幅中的一些图像。

现在，我想使用 AngularJS，因此我将 HTML 代码分成单独的部分。

1. 标题
2. 页脚
3. 顶部横幅

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

在应用 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'})
});

当我刷新页面时， slider 不起作用，呈现为简单的 html，没有任何 jQuery 效果，真是一团糟。

这个部分有一些 jQuery 插件，通常由 document.ready 激活。但是当 ng-view 中的 Angular 负载部分时，此事件不会触发。我如何调用此事件来初始化 jQuery 插件？

知道如何解决这个问题吗？

感谢任何帮助。

Answer 1

当您指定路线时，您还可以指定 Controller ，因此您的路线将如下所示:

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'})
    });

现在，您可以在每个 Controller 内定义您想要执行的操作，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();
}]);

有道理吗？