Различное поведение из-за порядка импорта AngularJS и jQuery

Question

Я пытаюсь написать директиву AngularJS с именем «insert-after-parent», которая вставляет содержимое после его родителя. Внутри этой директивы я использую jQuery для выбора родительского элемента. Поскольку AngularJS основан на jQuery, я загружаю сначала jQuery и структуру AngularJS. Но когда я это делаю, моя директива не работает. Но если я сначала загружаю AngularJS, а затем структуру jQuery, он работает. Может кто-нибудь сказать мне почему?

angular.module('ls', []).directive('insertAfterParent', ["$compile", function($compile){ 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs){ 
      scope.$watch(function(scope) { 
       return scope.$eval(attrs.src) 
      }, function(id) { 
       if(id){ 
        var content = $('script[type="text/ng-template"][id="' + id + '"]').html() 
        if(content){ 
         $compile($(content).insertAfter(element.parent()))(scope) 
        } 
       } 
      }) 
     } 
    } 
    }]) 

Вот ссылка на мой plunkr: http://plnkr.co/edit/gTXk0bjyQ6nTTCaB9Czg?p=preview

Я использую угловой 1.2.23 и JQuery 1.7.1 Согласно документации (AngularJS FAQ), эти версии совместимы.

Answer 1

Как вы сказали, у углового есть сокращенная версия jquery. Как только вы загружаете углы - ваш полный jQuery body будет перезаписан с урезанной версией.

И, пожалуйста, не загружайте jquery. Вам это не нужно - если вы каким-то образом не обновляете старое jQuery-решение для angularjs ... Когда вам оказывается, что вам нужно jquery, это приложение вашего приложения «неправильно» или, наконец, не сделано угловым способом - декларативным.