Angular und jQuery Modal - undefined ist keine Funktion

Question

Ich erstelle eine modal mit Angular und jQuery, und ich neu in jQuery, so dass ich diese Direktive angular+jQuery modal benutze.

Und ich bin immer diese Fehlermeldung:

undefined is not a function

Für:

$(element).modal('show'); 

Wenn es um

Ändern

$element.modal('show'); 

Die Fehler Änderungen

$element is not defined.

Mein Code für die directive:

mymodal.directive('modal', function() { 
    return { 
     template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
       '<div class="modal-header">' + 
       '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
       '<h4 class="modal-title">{{ title }}</h4>' + 
       '</div>' + 
       '<div class="modal-body" ng-transclude></div>' + 
      '</div>' + 
      '</div>' + 
     '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace:true, 
     scope:true, 
     link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 

     scope.$watch(attrs.visible, function(value){ 
      if(value == true) 
      $(element).modal('show'); 
      else 
      $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = true; 
      }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = false; 
      }); 
     }); 
     } 
    }; 
    }); 

Vielen Dank für jede Hilfe! Wenn mehr Code benötigt wird, werde ich es veröffentlichen.

Answer 1

Fixed Demo, erraten Sie den Code völlig korrekt ist.

Warum funktioniert nicht, da die bootstrap.min.js geladen fehlgeschlagen ist.

Ich verwende einfach https für bootstrap.min.js und Update jQuery zu 2.0.0, dann hat es funktioniert.