简体   繁体   中英

why i am getting undefined is not a function?

I am trying to make popover using angular UI pop over .I load my html and complile that HTml but when I run my program and click ICon (star icon where I am showing pop over ) I am getting error undefined is not a function?

http://plnkr.co/edit/o0mVZujOH0Apqurvq9xX?p=preview

I used these lines

     <td ><span   pop-over items="items", title="Mode of transport" class="glyphicon glyphicon-star content"></span> </td>

app.directive('popOver', function ($compile) {
  var itemsTemplate ="<div ng-controller='AfterCtrl'><ul class='list-group'><li class='list-group-item' ng-click='editRowName()'>Edit</li><li class='list-group-item ' ng-click='deleteRow($index)'>Delete</li></ul></div>" ;
  var getTemplate = function (contentType) {
    var template = '';
    switch (contentType) {
      case 'items':
        template = itemsTemplate;
        break;
    }
    return template;
  }
  return {
    restrict: "A",
    transclude: true,
    template: "<span ng-transclude></span>",
    link: function (scope, element, attrs) {
      var popOverContent;
      if (scope.items) {
        var html = getTemplate("items");
        popOverContent = $compile(html)(scope);
      }
      var options = {
        content: popOverContent,
        placement: "bottom",
        html: true,
        title: "aa"
      };
      $(element).popover(options);
    },
    scope: {
      items: '=',
      title: '@'
    }
  };
});

The first issue is due to your importing jQuery again at the bottom (as others have already mentioned). So, remove the last jQuery import.

The main issue is that scope.items is undefined, so you never get inside the if and thus popOverContent remains undefined. You probably mean to use:

...
$scope: {
    items: '@',
    ...
}

See, also, this modified plunkr .


Not directly related to the question, but here is a modified implementation of the popOver directive. I have changed it a bit (to make it working with as little changes as possible), eg it doesn't have an isolate scope any more, it doesn't use a fixed template etc.
The buttons are working as expected.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM