Question

我有这个初始化jquery插件的指令

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-sidebar由jquery插件由$（element）.mapplic（{}）动态生成;宣言。如何正确追加元素？我是否应该为此创建另一个指令？

HTML

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

Answer 1

正确的方法是首先$compile然后将其附加到特定的div。

您可以参考以下方式，您可以通过控制器动态添加它：

.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

我终于明白了。我意识到你必须在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);               
            }           
        };
    });

让我知道是否有更好的解决方案。谢谢！

Answer 3

它可能对你有所帮助!!点击jsfiddle

HTML code sample

<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;
}

如何在jquery插件生成的div上动态添加指令

3 个答案: