how to load html in while making pop over?

StackOverflow https://stackoverflow.com//questions/25010748

Вопрос

I make a pop over .But I insert my pop over content in same html file.I want to load popover contend from another file and load the contend using templateURl :can we do that ?

Here is my demo

HTML:

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

<head>
    <meta charset="utf-8"/>
    <title>AngularJS Plunker</title>
    <link href="bootstrap.min.css" rel="stylesheet"/>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="js/angular.js"></script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="js/angulartest.js"></script>

    <meta charset="utf-8" />


<body>



<div ng-controller="MainCtrl">
<script type="text/ng-template" id="templateId.html">
    <div  id="Mainnavpanel" data-theme="b"  class="custom-popup">
        <ul >
            <li><a href="#"  class="btn edit_h"><i class="edit1 space1"></i>Edit</a></li>
            <li><a href="#" class="btn deleteTestCase_h" ><i class="delete1 space1"></i>Delete</a>
            </li>
            <li><a href="#" class="btn copy_h" ><i class="copy1 space1"></i>Copy</a></li>
        </ul>
    </div>
</script>
    <br>
    <br>
    <br>
<button>ddd</button>
<a href="#" mypopover  >Click here</a>
</div>


</body>

</html>

JS:

var app = angular.module('plunker', []);


app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});

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

    console.log($templateCache.get("a.html"));
    var getTemplate = function (contentType) {

        var template = '';

        switch (contentType) {
            case 'user':
                template = $templateCache.get("templateId.html");


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

        link: function (scope, element, attrs) {
            console.log($templateCache.get("a.html"));
            var popOverContent;

            popOverContent = getTemplate("user");
           // popOverContent=$templateCache.get("a.html")
            popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);
            console.log(popOverContent);
            console.log(scope)

            var options = {

                content: popOverContent,
                placement: "right",
                html: true,
                date: scope.date
            };
            $(element).popover(options);
        }
    };
});

I just want to load this contend from another html file :

 <div  id="Mainnavpanel" data-theme="b"  class="custom-popup">
            <ul >
                <li><a href="#"  class="btn edit_h"><i class="edit1 space1"></i>Edit</a></li>
                <li><a href="#" class="btn deleteTestCase_h" ><i class="delete1 space1"></i>Delete</a>
                </li>
                <li><a href="#" class="btn copy_h" ><i class="copy1 space1"></i>Copy</a></li>
            </ul>
        </div>
Это было полезно?

Решение

Hi Here is your plunk code

I used the ajax to get the content of html, then show the pop-up. There are alot of ways to write it, this is combined with jquery and async call...does the job

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

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

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

        $.ajax({
                type: "GET",
                url: 'test.html',
                type: 'get',
                dataType: 'html',
                success: function (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);


     }
     };
});

Let me know if it helped you, preview is here

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top