Angularjs中使用$ modal Bootstrap的“$ element.empty不是函数”

时间:2015-05-27 07:49:27

标签: angularjs angular-ui-bootstrap bootstrap-modal

我在尝试复制jsfiddle中的场景时遇到了一些麻烦。我在引导程序中使用$ modal来尝试打开模式窗口时单击屏幕中的元素,当我点击它时,而不是获取窗口我只是得到背景和控制台中的错误“$ element。空不是一个功能“。

我检查js是否有引导程序,这是导致错误的代码(行$element.empty();,但我不知道是什么导致它。有什么想法吗?

.directive('modalTransclude', function () {
    return {
      link: function($scope, $element, $attrs, controller, $transclude) {
        $transclude($scope.$parent, function(clone) {
          $element.empty();
          $element.append(clone);
        });
      }
    };
  })

我有一个jsfiddle代码,这是我正在使用的指令:

var app = angular.module("app",['ui.bootstrap']);

app.directive("myDir", ['$compile', '$modal', function($compile, $modal){
    return {
        restrict: 'E',
        scope: true,
        replace: true,
        link: function (scope, element, iAttrs) {            

            var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', 10);
            circle.setAttribute('cy', 10);
            circle.setAttribute('r', 5);            

            circle.setAttribute('ng-click', 'open()');

            element.append(circle);

            $compile(element)(scope);
        },
        controller: function($scope) {              
            $scope.open = function () {                 
                var modalInstance = $modal.open({
                    template: '<div>I am a modal</div>'
                });
            };              
        },
        template:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="200"><image x="0" y="0" width="400" height="200" xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/></svg>'    
    }
}]);

在我的应用程序中我没有得到这个错误,唯一的区别是我使用bootstrap 0.13而不是jsfiddle中的0.12(我不能使用0.13,因为它需要angularjs 1.3,这在小提琴中不可用)。

提前致谢。

0 个答案:

没有答案