Übergeben eines Objekts als Attribut zu kompilierten Direktive im laufenden Betrieb

Question

Ich habe ein eckiges Element auf der Seite, die mit dem Rest der nicht eckigen Seitenelemente kommunizieren muss.

Ich erstelle Direktive-Elemente im laufenden Betrieb und hängt sie an ihr Ziel-Div auf. Ich versuche, diese erzeugte Anweisung ein Objekt (Ajax-Objekt) zu übergeben, das nur Attribute enthält.

Das Problem ist, dass ich nicht herausfinden kann, wie nur dieses Ajax-Objekt an die Direktive übergeben wird, da $ compile einen Geltungsbereich erfordert. Wenn der http beendet wird, und weil ich = in der Direktive verwenden muss, werden die Direktiven übergangen.

Bitte beachten Sie meine Plunk: https://plnkr.co/edit/brTWgUWTotI44tECZXlQ (Entschuldigung für die Bilder). Klicken Sie auf die <button>, um die Richtlinie auszulösen.

(function() { 
'use strict'; 
var CHANNEL = 'podOverlay'; 
angular.module('CavernUI', []) 
    .controller('CavernCtrl', function($scope,getItemService) { 

    $scope.model = {}; 
    var _pods = $scope.model.pods = {}; 

    function getData(selector) { 
     $(selector).each(function(i, pod) { 
     _pods[+pod.dataset.item] = { 
      $: $(pod) 
     }; 
     }); 

     Object.keys($scope.model.pods).map(function(key) { 
     getItemService.getItem(key).success(function(response) { 
      _pods[key] = angular.extend(_pods[key], response); 
      $scope.$broadcast(CHANNEL, _pods[key], $scope); 
     }); 
     }) 
    } 

    $scope.runPodCheck = function(selector) { 
     getData(selector); 
    } 
    }) 
    .directive('podchecker', function($compile) { 

    var createOverlay = function(e,data,scope){ 
     scope.data = data; 
     // can i just pass data rather than scope.data? 
     // If I pass the scope, then when another $broadcast happens 
     // the scope updates, wiping out the last scope change. 
     // Scope here really needs to be a static object that's 
     // created purely for the hand off. But I don't know if 
     // that can be done. 
     angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(scope)); 
    } 

    return { 
     restrict: 'E', 
     scope: { 
     check: '&', 
     }, 
     templateUrl: 'tpl.html', 
     link: function(scope,elm,attr){ 
     scope.$on(CHANNEL,createOverlay); 
     } 
    }; 
    }) 
    .directive('overlay', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     o: '=data' // here is the problem. 
     }, 
     template: '<div class="overlay"><a href="{{o.url}}"><img ng-src="{{o.images.IT[0]}}"/></a></div>', 
     link: function(scope, elm, attr) { 

     } 
    } 
    }) 
    .service('getItemService', ['$http', function($http) { 
    this.getItem = function(itemId) { 
     return $http({ 
     method: 'GET', 
     url: 'https://www.aussiebum.com/ajaxproc/item', 
     params: { 
      id: itemId, 
      ajxop: 1 
     }, 
     }); 
    }; 
    }]); 
}()); 

Edits: Erwartete ouput:

Answer 1

Ich bin mir nicht sicher, dass dies der beste Ansatz ist, aber eine Möglichkeit sein könnte, um manuell einen neuen Bereich für jede der Overlays zu erstellen.

diese So verändert:

var createOverlay = function(e,data,scope){ 
      scope.data = data; 
      angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(scope)); 
     } 

dazu:

var createOverlay = function(e,data,scope){ 
      var overlayScope = scope.$new(false); // use true here for isolate scope, false to inherit from parent 
      overlayScope.data = data; 
      angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(overlayScope)); 
     } 

Aktualisiert Plnkr: https://plnkr.co/edit/wBQ1cqVKfSqwqf04SnPP

Mehr Infos über $new()

Prost!