问题描述:

I am trying to call ajax and get my HTML contend .But I want to show that data on tooltip/or pop over .I am getting the data on console I don't know why it showing black data tooltip it is showing black .is there problem in binding ?

here is plunker

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

when you click "star" image it show blank data.why ?

app.directive('mypopover', function ($compile,$templateCache) {

var getTemplate = function (contentType,scope,element) {

var template = $templateCache.get("templateId.html");

$.ajax({

type: "GET",

url: 'partials/popup.html',

type: 'get',

dataType: 'html',

success: function (data) {

alert('d'+data)

var options = {

content: $(template).html(data),

placement: "right",

html: true,

date: scope.date

};

$(element).popover(options);

},

error: function (data) {

}

});

return template;

}

return {

restrict: "A",

link: function (scope, element, attrs) {

console.log('entering link')

var popOverContent;

popOverContent = getTemplate("user",scope,element);

}

};

});

网友答案:

there was few error please see here: http://plnkr.co/edit/5SpDRkMokbPCMRT8oB0r?p=preview

app.directive('mypopover', function($compile, $templateCache) {
  var getTemplate = function(contentType, scope, element) {

    var template = $templateCache.get("templateId.html");

    $.ajax({
      type: "GET",
      url: 'pop.html',
      type: 'get',
      dataType: 'html',
      success: function(data) {
        console.log($(template).html(data));
        var options = {


          content: data,
          placement: "right",
          html: true,
          date: scope.date
        };
        $(element).popover(options);
      },
      error: function(data) {
        alert(data)

      }
    });

    return template;
  }
  return {
    restrict: "A",

    link: function(scope, element, attrs) {
      console.log('entering link')
      var popOverContent;
      popOverContent = getTemplate("user", scope, element);


    }
  };
});

html:

<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="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.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>
    <script data-require="[email protected]" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://dl.dropboxusercontent.com/s/a98aey2mlu0h511/bootstrap-tooltip.js"></script>
    <script src=" https://dl.dropboxusercontent.com/s/s1imyubboz1qjtl/bootstrap-popover.js?m="></script>

    <script src="script.js"></script>
  </head>
网友答案:

The error was in your <script> tags list : http://plnkr.co/edit/GUlSHxy6aEwfVZuXFwDM?p=preview

        <script src="https://dl.dropboxusercontent.com/s/a98aey2mlu0h511/bootstrap-tooltip.js"></script>

    <script src="https://dl.dropboxusercontent.com/s/s1imyubboz1qjtl/bootstrap-popover.js?m="></script>

<script src="script.js"></script>
相关阅读:
Top