如何在新的 AngularJS 视图上运行 Javascript答案

【问题标题】：How can you run a Javascript on a new AngularJS view如何在新的 AngularJS 视图上运行 Javascript
【发布时间】：2015-11-24 21:22:08
【问题描述】：

我在 AngularJS 中使用路由，它根据参数（即提供的 URL 参数）显示不同的视图。我有一个显示光滑滑块的视图。不幸的是，当显示新视图时，滑块没有被实例化或运行。显示新视图时如何运行此 javascript？我需要创建一个新指令吗？

AngularJS：

angularApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/',
    {
        templateUrl:'/pages/default.html'
    }).
    when('/:params',
     {
        templateUrl: function(params){    
            params.param = params.params.replace(':', ''); 
            return '/pages/'+params.param; }

     });
}]);

光滑的滑块 JS：

$(window).load(function(){
  $('.slickSlider').slick({
    slidesToShow: 4,
    arrows: true,
    infinite: true,
    autoplay: true, 
    slidesToScroll: 1
  });

【问题讨论】：

为什么不在控制器中为运行 slickSlider 代码的特定视图放置一个 initialize 方法？
@ragerory 这是最简单的。谢谢！
查看这个答案：AngularJS Partial HTML not able to use jquery lib

标签： javascript jquery angularjs

【解决方案1】：

一般来说——在加载顺序方面不建议将 jQuery 和 Angular 结合使用......这有点混乱。最好使用其中之一。

对于您的具体问题，我会使用 this SO topic 中的“控制器作为” 并在控制器 init 上调用您想要的函数。

【讨论】：

【解决方案2】：

您可以将onload 属性添加到您用于视图的ng-view 元素。

例如<div ng-view onload='startSlider()'>

然后将光滑的滑块重构为只是

function startSlider(){
  $('.slickSlider').slick({
    slidesToShow: 4,
    arrows: true,
    infinite: true,
    autoplay: true, 
    slidesToScroll: 1
  };

【讨论】：

我尝试向 onload 事件添加警报，但没有任何反应。

【解决方案3】：

您需要做的就是在控制器中创建一个初始化函数。下面是一个例子。当视图初始化时，它会调用控制器，在该控制器中调用 $scope 函数并且您的插件 JS 代码可以运行。

=== AngularJS ===

angularApp.controller('blog', function($scope){
    $scope.init = function()
    {
        $('.slickSlider').slick({
            slidesToShow: 4,
            arrows: true,
            infinite: true,
            autoplay: true, 
            slidesToScroll: 1
          });
    }
    $scope.init();

});

=== HTML ===

<div ng-controller="blog"></div>

【讨论】：

【解决方案4】：

我对代码进行了一些重构，以提供更多的语义和清晰度。

当视图被加载时，它会发出事件：$viewContentLoaded 表示 DOM 已加载，然后您可以安全地初始化 jQuery 插件。

angularApp.config(['$routeProvider',
  function Router($routeProvider) {
      'use strict';

      $routeProvider
      .when('/:params', {
          templateUrl: function(params) {
              params.param = params.params.replace(':', '');
              return '/pages/' + params.param;
          },
          controller: 'ParamsCtrl',
          controllerAs: 'paramsCtrl'
      });
  }
]);

angularApp.controller('ParamsCtrl', ['$scope',
  function ParamsCtrl($scope) {
      'use strict';

      var paramsCtrl = this, //the controller
          $ = jQuery; //safe alias to jQuery

      //if your content is inside ng-include, 
      //use: $scope.$on('$includeContentLoaded')
      //emitted every time the ngInclude content is reloaded
      $scope.$on('$viewContentLoaded', function() {
          $('.slickSlider').slick({
              slidesToShow: 4,
              arrows: true,
              infinite: true,
              autoplay: true,
              slidesToScroll: 1
          });
      });
  }
]);

查看这个有用的答案：AngularJS Partial HTML not able to use jquery lib

【讨论】：