Angular和jQuery模式 - undefined不是一个函数

时间:2016-05-22 13:08:45

标签: jquery angularjs modal-dialog

我正在使用Angular和jQuery创建一个modal,我是jQuery的新手,所以我使用的是这个指令angular+jQuery modal

我收到了这个错误:

  

undefined不是函数

对于:

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

将其更改为

$element.modal('show');

错误更改为

  

$ element未定义。

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

感谢您的帮助!如果需要更多代码,我会发布它。

1 个答案:

答案 0 :(得分:1)

Fixed Demo ,猜猜你的代码是完全正确的。

为什么不工作,因为bootstrap.min.js加载失败。

我只使用https用于bootstrap.min.js并将jQuery更新为2.0.0,然后就可以了。