Passare un oggetto come attributo alla direttiva compilata al volo

Question

Ho un elemento angolare sulla pagina che deve comunicare con il resto degli elementi di pagina non angolari.

Sto creando elementi direttivi al volo e aggiungendolo al suo div target. Sto cercando di passare a quella direttiva creata un oggetto (oggetto ajax), che contiene solo attributi.

Il problema è che non riesco a capire come passare solo questo oggetto ajax alla direttiva, come $ compilazione richiede un ambito. Quando termina l'http e perché devo usare = nella direttiva, le direttive vengono superate.

Si prega di vedere il mio plunk: (mi dispiace per le immagini). Fare clic su <button> per attivare la direttiva.

(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 
     }, 
     }); 
    }; 
    }]); 
}()); 

Modifiche: ouput atteso:

Answer 1

io non sono sicuro che questo è l'approccio migliore, ma un modo potrebbe essere quello di creare manualmente un nuovo ambito per ciascuna delle sovrapposizioni.

così cambiato questo:

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

a questo:

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

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

informazioni Ulteriori informazioni su $new()

Cheers!