angularjs - 将对象作为属性传递给动态编译指令

Question

我的页面上有一个 Angular 元素，需要与其余非 Angular 页面元素进行通信。

我正在动态创建指令元素，并将其附加到其目标 div 中。我试图向创建的指令传递一个对象(ajax 对象)，其中仅包含属性。

问题是我不知道如何将这个 ajax 对象传递给指令，因为 $compile 需要一个范围。当http完成时，因为我必须使用 =在指令中，指令被覆盖。

请看我的笨蛋:https://plnkr.co/edit/brTWgUWTotI44tECZXlQ (对图像感到抱歉)。点击<button>触发指令。

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

编辑:预期输出:

Answer 1

我不确定这是否是最好的方法，但一种方法可能是为每个叠加层手动创建一个新范围。

所以改变了这个:

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

对此:

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

更新的 Plnkr:https://plnkr.co/edit/wBQ1cqVKfSqwqf04SnPP

有关 $new() 的更多信息

干杯!