AngularJS部分HTML无法使用jQuery LIB（这是在加载的index.html） [英] AngularJS Partial HTML not able to use jquery lib (Which is loaded in index.html)

问题描述

我使用的是网页模板是使用jQuery图片库或其他等。
我想这个模板转换angularjs结构。我做了一些局部的HTML页面一样slider.html或contact.html及其控制器。
当我打电话部分HTML索引，滑块无法将能够使用我装在他们的jQuery的索引库。
如果我刷新页面时，部分是打开它再次工作。
我读到指令或其他等。有些文章，但我不写他们只是加载索引和HTML使用它们，所以我不需要任何指令工作的脚本我只需要使用部分HTML所有的库文件任何脚本。

I am using a web templates which is use jquery image gallery or other etc. I want to convert this template to angularjs structure. I make some partial html pages like slider.html or contact.html and its controller. when i call partial html to index ,slider can not able to use jquery libraries which ı loaded them in index. İf i refresh the page when partial is open it works again. I read some article about directives or other etc. but ı am not writing any script they are just loaded in index and html uses them so i do not need any directive to work a script i just need use all library file in partial html.

有什么办法？

我尝试加载哪些部分会使用，但以这种方式所有库加载每个呼叫和它所有的库，但它并不是一个好办法。

i try to load all libraries which partial will use but in this way all libraries loaded each call and it works but it is not a good way

推荐答案

我有一些建议：首先，你的图书馆不应该包括在视图中。你应该只包括在应用程序中的一个点的库。可以是异步的（通过JavaScript），或通过添加在 剧本 标签在你的索引文件库中。

I have some tips: First of all, your libraries should not be included in the view. You should include the library just in one point of your application. Could be asynchronous (via JavaScript), or by adding the script tag for the library in your index file.

如果您决定添加通过JavaScript库，考虑到做一个检查，以prevent倍数包括，例如，

If you decide add the library via JavaScript, take into account to do a check to prevent multiples includes, e.g.,

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

您也可以添加在 剧本 在索引/主HTML文件的标签，如果你想异步加载它，你可以添加属性 异步 或 延迟 。结果
- 看看的 HTML 5℃脚本＆GT;标记 的

现在，涉及到的 AngularJS ，当你加载的局部视图，是引发该事件的的 $ includeContentLoaded 这是发射每次在的 ngInclude 内容被重新装载

Now, related to AngularJS, when you load a partial view, is raised the event $includeContentLoaded which is emitted every time the ngInclude content is reloaded.

如果你有两个或多个部分的意见包括在内，你应该问的，你要加载的库/插件或做一些DOM操作，例如具体的看法。

If you have two or more partial views included, you should ask for the specific view where you want to load a library/plugin or make some DOM manipulation, e.g.,

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

  }
]);

在code的事项这里是事件的 $ includeContentLoaded 。访问该网站获取更多信息： https://docs.angularjs.org/api / NG /指令/ ngInclude

The code that matters here is the event $includeContentLoaded. Visit the site for more information: https://docs.angularjs.org/api/ng/directive/ngInclude

如果您使用的是 NG-视图你应该没有问题，只是登记在路由器的看法（也有很多的方法来达到同样的）

If you are using ng-view you should have no problems, just register the view in the router (there are a lot of ways to achieve the same)

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

router.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);
    */

  }
]);

当视图被加载时，它发出的事件： $ viewContentLoaded 这意味着DOM被加载，那么你可以放心地初始化jQuery插件。

When the view is loaded, it emits the event: $viewContentLoaded meaning the DOM is loaded, then you can initialize jQuery plugins safely.

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

---

重要提示：在previous code，其中脚本包括顺序的确很重要。

---

Important: In the previous code, the order where scripts are included does matter.

1. module.js


2. router.js


3. controller.js

我强烈建议使用自动化工具，如 一饮而尽

I highly recommend using automation tools such as gulp

这篇关于AngularJS部分HTML无法使用jQuery LIB（这是在加载的index.html）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！