javascript - AngularJS 部分 HTML 无法使用 jquery lib(在 index.html 中加载)

Question

我正在使用一个网页模板，它使用 jquery 图片库或其他等。 我想将此模板转换为 angularjs 结构。我制作了一些部分 html 页面，例如 slider.html 或 contact.html 及其 Controller 。 当我调用部分 html 到索引时， slider 无法使用我在索引中加载的 jquery 库。 如果我在部分打开时刷新页面，它会再次工作。 我读了一些关于指令或其他等的文章，但我没有编写任何脚本，它们只是在索引中加载，html 使用它们，所以我不需要任何指令来工作脚本，我只需要在部分 html 中使用所有库文件。

有什么办法吗？

我尝试加载部分将使用的所有库，但通过这种方式，所有库都加载每个调用并且它可以工作，但这不是一个好方法

Answer 1

我有一些提示:首先，您的库不应该包含在 View 中。您应该仅在应用程序的某一点中包含该库。可以是异步的(通过 JavaScript)，或者通过在索引文件中添加库的 script 标记来实现。

如果您决定通过 JavaScript 添加库，请考虑进行检查以防止多次包含，例如

if (!window.jQuery) {
    //include jQuery library
}

您还可以在索引/主 html 文件中添加 script 标记，如果您想异步加载它，可以添加属性 异步或延迟。
-- 看看 HTML 5 <script> Tag 。

现在，与 AngularJS 相关，当您加载部分 View 时，会引发事件 $includeContentLoaded 每次 ngInclude 时都会发出内容已重新加载。

如果包含两个或多个部分 View ，则应该询问要加载库/插件或进行一些 DOM 操作的特定 View ，例如，

Controller .js

angular
.module('myApp')
.controller('HomeCtrl', [
  '$scope', '$window',
  function ($scope, $window) {
    'use strict';

    var homeCtrl = this,
      $ = jQuery; //safe alias


    //Emitted every time the ngInclude content is reloaded.
    $scope.$on('$includeContentLoaded', function (event, source) {

      if ('src/pages/home/zipcodeForm/view.html' === source) {
        //initialize your jQuery plugins, or manipulate the DOM for this view
      } 
      else if('src/pages/home/section1/view.html' === source){
        //initialize your jQuery plugins, or manipulate the DOM for this view
      }
    });


    //Can be used to clean up DOM bindings before an element is removed
    //from the DOM, in order to prevent memory leaks
    $scope.$on('$destroy', function onDestroy() {
      //destroy event handlers
    });

  }
]);

这里重要的代码是事件$includeContentLoaded。访问网站了解更多信息: https://docs.angularjs.org/api/ng/directive/ngInclude

如果您使用ng-view，您应该没有问题，只需在路由器中注册 View 即可(有很多方法可以实现相同的目的)

模块.js

angular
.module('myApp', ['ngRoute' /*, other dependecies*/]);

路由器.js

angular
.module('myApp')
.config(['$routeProvider', '$locationProvider',
  function ($routeProvider, $locationProvider) {
    'use strict';

    $routeProvider

    .when('/', {
      templateUrl: 'src/pages/home/view.html',
      controller: 'HomeCtrl',
      controllerAs: 'homeCtrl',
      reloadOnSearch: false
    })

    .when('/index.html', {
      redirectTo: '/'
    })

    .when('/home', {
      redirectTo: '/'
    })

    .when('/404', {
      templateUrl: 'src/pages/error404/view.html',
      controller: 'Error404Ctrl',
      controllerAs: 'error404Ctrl'
    })

    .otherwise({
      redirectTo: '/404'
    });

    /*
      Set up the location to use regular paths instead of hashbangs,
      to take advantage of the history API
      $locationProvider.html5Mode(true);
    */

  }
]);

加载 View 时，它会发出事件: $viewContentLoaded 意味着 DOM 已加载，然后您可以安全地初始化 jQuery 插件。

Controller .js

angular
.module('myApp')
.controller('HomeCtrl', [
  '$scope', '$window',
  function HomeCtrl ($scope, $window) {
      'use strict';

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

      //Emitted every time the ngView content is reloaded.
      $scope.$on('$viewContentLoaded', function() {
          $('.slickSlider').slick({
              slidesToShow: 4,
              arrows: true,
              slidesToScroll: 1
          });
      });
  }
]);

<小时/>

重要:在前面的代码中，包含脚本的顺序很重要。

1. 模块.js
2. router.js
3. controller.js

我强烈建议使用自动化工具，例如 gulp