Как добавить директиву динамически на JQuery плагин генерируется ДИВ

Question

У меня есть эта директива, инициализировать Jquery Plugin

app.directive('floorplansMapplic',function($compile){ 
    return{ 
     restrict: 'A', 
     link: function (scope, element, attrs) {    
      $(element).mapplic({ 
       source: 'apartment.json', 
       height: 1080, 
       animate: true, 
       mapfill: true, 
       sidebar: true, 
       minimap: true, 
       deeplinking: true, 
       fullscreen: true, 
       hovertip: true, 
       developer: false, 
       maxscale: 1, 
       search: false, 
      }); 
      $(element+" .mapplic-sidebar").append("<a href></a>"); //what is the right way to do this? 
     }   
    }; 
}); 

.mapplic-боковая панель динамически генерируется с помощью JQuery плагин с помощью $ (элемент) .mapplic ({}); декларация. Как правильно добавить элемент? Должен ли я создать для вас другую директиву?

HTML-

<div id="mapplic" floorplans-mapplic></div> 

Answer 1

Правильный способ сделать это первым $compile его, а затем добавить его в частности дел.

Вы можете обратиться к ниже способу, в котором вы можете добавить его динамически через контроллер, как:

.directive('floorplansMapplic', function ($compile) { 
    return { 
    restrict: 'A',  
    link: function ($scope, $element, attrs) { 
     $(element).mapplic({ 
       source: 'apartment.json', 
       height: 1080, 
       animate: true, 
       mapfill: true, 
       sidebar: true, 
       minimap: true, 
       deeplinking: true, 
       fullscreen: true, 
       hovertip: true, 
       developer: false, 
       maxscale: 1, 
       search: false, 
     }); 

     var el = $compile("<a href></a>")($scope); 
     $(element+" .mapplic-sidebar").append(el); 

    } 
    }; 
}); 

Надеется, что это поможет вам :)

Answer 2

Это может помочь вам !! нажмите для образца кода jsfiddle

HTML

<section ng-app="myApp" ng-controller="MainCtrl"> 
    <addbuttonsbutton></addbuttonsbutton> 
    <div id="space-for-buttons"></section> 
</section> 

AngularJS директива код

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

function MainCtrl($scope) { 
    $scope.count = 0; 
} 

//Directive that returns an element which adds buttons on click which show an alert on click 
myApp.directive("addbuttonsbutton", function(){ 
    return { 
     restrict: "E", 
     template: "<button addbuttons>Click to add buttons</button>" 
    } 
}); 

//Directive for adding buttons on click that show an alert on click 
myApp.directive("addbuttons", function($compile){ 
    return function(scope, element, attrs){ 
     element.bind("click", function(){ 
      scope.count++; 
      angular.element(document.getElementById('space-for-buttons')).append($compile("<div><button class='btn btn-default' data-alert="+scope.count+">Show alert #"+scope.count+"</button></div>")(scope)); 
     }); 
    }; 
}); 

//Directive for showing an alert on click 
myApp.directive("alert", function(){ 
    return function(scope, element, attrs){ 
     element.bind("click", function(){ 
      console.log(attrs); 
      alert("This is alert #"+attrs.alert); 
     }); 
    }; 
}); 

И код CSS

section{ 
    padding: 2em; 
} 
button{ 
    padding:0.3em; 
    margin: 0.3em; 
} 

Answer 3

я, наконец, понять это. Я понял, что вам нужно добавить задержку после того, как jQuery сгенерировал HTML, чтобы вы могли вызвать сгенерированное содержимое. Вот что я сделал. Я использовал угловой $ timeout, и теперь он работает отлично!

//initialize floorplans mapplic jquery 
    app.directive('floorplansMapplic',function($compile,$timeout){ 
     return{ 
      restrict: 'A', 
      transclude: true, 
      link: function (scope, element, attrs) { 
       $(element).mapplic({ 
        source: 'apartment.json', 
        height: 1080, 
        animate: true, 
        mapfill: true, 
        sidebar: true, 
        minimap: true, 
        deeplinking: true, 
        fullscreen: true, 
        hovertip: true, 
        developer: false, 
        maxscale: 1, 
        search: false, 
       }); 
       $timeout(function(){ //add a delay before appending a content 
        var elbtn = $compile('<a href ng-click="openModal()">Send a PDF</a>')(scope); //compile the content to be added 
        var elsidebarlist = $compile(".mapplic-sidebar")(scope); //compile the content that was generated by the jquery plugin 
        $(elsidebarlist).append(elbtn);  
       }, 1000);    
      }   
     }; 
    }); 

Сообщите мне, если есть лучшее решение. Благодаря!