Przekazywanie obiektu jako atrybutu skompilowanej dyrektywy w locie

Question

Mam element kątowy na stronie, który musi się komunikować z resztą nieokreślonych elementów strony.

Tworzę elementy dyrektyw w locie i dołączam je do elementu docelowego. Próbuję przekazać utworzonej dyrektywy obiekt (obiekt ajax), który zawiera tylko atrybuty.

Problem polega na tym, że nie mogę wymyślić, jak przekazać ten obiekt ajax tylko do dyrektywy, ponieważ $ compile wymaga zakresu. Kiedy kończy się http, i ponieważ muszę używać w dyrektywie =, dyrektywy są nadpisywane.

Proszę zobaczyć mój plunk: https://plnkr.co/edit/brTWgUWTotI44tECZXlQ (przepraszam za zdjęcia). Kliknij przycisk <button>, aby uruchomić dyrektywę.

(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: Oczekiwany wyjściami:

Answer 1

nie jestem pewien, że to najlepsze podejście, ale jednym ze sposobów może być ręcznie utworzyć nowy zakres dla każdej z nakładek.

Więc zmienił to:

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

do tego:

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

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

więcej informacji o $new()

Cheers!