Search code examples
javascriptjqueryangularjsangularjs-directiveangular-strap

how to remove this error (Looking up elements via selectors )

I am trying to make popover using Angularstap.js .I read documentation from here http://mgcrea.github.io/angular-strap/##popovers But my pop over not display on click can you tell me where I am doing wrong . here is my plunker http://plnkr.co/edit/Cp7wrpeh8SS4oY5GGRfY?p=preview

getting error : Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
        <script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>

        <script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>

        <script src="https://dl.dropboxusercontent.com/s/qhgexynaog5ul5l/popover.js"></script>

  </head>

  <body>
<button type="button" class="btn btn-lg btn-danger" title="this" data-content="{{popover.content}}" data-template="pop.html" data-animation="am-flip-x" bs-popover>Custom Popover


</button>  </body>
<script>
  var myapp =angular.module('myApp', ['mgcrea.ngStrap']);

</script>
</html>
Solution

  • Actually, the documentation have already mentioned about the template attribute, but it quite hard to notice:

    It should be a div.popover element following Bootstrap styles conventions like this.

    Therefore your pop.html should have the same structure like this:

    <div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content">
    <ul class="list-group">
        <li class="list-group-item" ng-click="hidePopover();editRowName(student)">Edit</li>
        <li class="list-group-item " ng-click="deleteRow($index)">Delete</li>
    </ul>
  </div>
</div>

    Example Plunker: http://plnkr.co/edit/sKApS5eC0NCv1PLsQKZx?p=preview