为什么我得到undefined不是一个功能?

时间:2014-08-08 12:12:24

标签: javascript jquery angularjs

我正在尝试使用角度UI弹出窗口。我加载我的html和complile HTml,但是当我运行我的程序并单击ICon(我正在显示弹出的星形图标)我收到错误undefined不是功能

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

我使用了这些行

     <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: '@'
    }
  };
});

1 个答案:

答案 0 :(得分:0)

第一个问题是由于您在底部再次导入jQuery(正如其他人已经提到的那样)。 所以,删除最后一个jQuery导入。

主要问题是scope.items未定义,因此您永远不会进入if,因此popOverContent仍未定义。 你可能想要使用:

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

另请参阅此 modified plunkr


<子> 与问题没有直接关系,但这是popOver指令的 modified implementation 。我已经改变了一点(使其尽可能少地改变),例如它不再具有隔离范围,它不使用固定模板等 按钮按预期工作。