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

页面上有一个角度元素，它需要与其他非角度页面元素进行通信

我正在动态创建指令元素，并将其附加到其目标div。我正在尝试将创建的指令传递给一个对象（ajax对象），该对象只包含属性

问题是我不知道如何将这个ajax对象传递给指令，因为$compile需要一个作用域。当http结束时，由于我必须在指令中使用

=

，指令被滥用了

请看我的照片：（对图片表示抱歉）。单击

以触发指令

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

（函数（）{
"严格使用",；
var通道='podOverlay'；
angular.module（'CavernUI'，[]）
.controller（'Ctrl'，函数（$scope，getItemService）{
$scope.model={}；
var_pods=$scope.model.pods={}；
函数getData（选择器）{
$（选择器）。每个（功能（i、pod）{
_pods[+pod.dataset.item]={
$：$（pod）
};
});
key（$scope.model.pods）.map（函数（键）{
getItemService.getItem（键）.成功（函数（响应）{
_吊舱[键]=角度扩展（_吊舱[键]，响应）；
$scope.$broadcast（频道，_pods[key]，$scope）；
});
})
}
$scope.runPodCheck=函数（选择器）{
获取数据（选择器）；
}
})
.directive（'podchecker'，函数（$compile）{
var createOverlay=函数（e、数据、范围）{
scope.data=数据；
//我可以只传递数据而不是scope.data吗？
//如果我通过范围，那么当另一个$broadcast发生时
//作用域将更新，删除最后一次作用域更改。
//这里的作用域需要是一个静态对象
//纯粹是为了交给别人，但我不知道
//这是可以做到的。
元素（数据$[0]）.empty（）.append（$compile（“”）（scope））；
}
返回{
限制：'E'，
范围：{
勾选：“&”，
},
templateUrl:'tpl.html'，
链接：功能（范围、elm、属性）{
范围：$on（频道，createOverlay）；
}
};
})
.directive（'overlay'，function（）{
返回{
限制：'E'，
范围：{
o:'=data'//问题出在这里。
},
模板：“”，
链接：功能（范围、elm、属性）{
}
}
})
.service（'getItemService'，['$http'，函数（$http）{
this.getItem=函数（itemId）{
返回$http({
方法：“GET”，
网址：'https://www.aussiebum.com/ajaxproc/item',
参数：{
id:itemId，
ajxop:1
},
});
};
}]);
}());

编辑： 预期输出：

---

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

所以改变了这一点：

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

var createOverlay=函数（e、数据、范围）{
scope.data=数据；
元素（数据$[0]）.empty（）.append（$compile（“”）（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));
       }

var createOverlay=函数（e、数据、范围）{
var overlayScope=scope.$new（false）；//此处使用true表示隔离作用域，使用false表示从父级继承
overlyscope.data=数据；
angular.element（data.$[0]）.empty（）.append（$compile（“”）（overlyscope））；
}

更新的Plnkr：

更多关于

---

干杯

是否需要您继续使用

非角度页面元素

，或者您可以选择将其设置为角度元素？不太了解问题，预期结果是什么<代码>o.数据存在于

覆盖

链接功能中。当我尝试使用scope.o时，它为每个指令显示不同的对象。。也许我误解了你的问题。就像其他人逃避的那样，很难理解你期望的结果应该是什么。考虑到这一点，我发现您正试图从每个DOM元素中读取“数据项”属性，并将其传递给一个指令以用另一个元素替换该元素。问题是，当您尝试这样做时，它总是使用“最后一个”DOM元素的“数据项”，因为它会以某种方式被覆盖，因为所有元素共享相同的范围。根据“数据项”值，期望的结果是一条红色内衣和一条蓝色内衣。这是对的吗？@LouieAlmeda是的，这是个限制。它是一个与“普通”html页面交互的管理工具。我不能把整件事都用棱角包起来，这确实管用。我希望有一种方法可以“捕获”从

podchecker

传递到

overlay

的对象，而不必创建新的作用域。稍后，我可能需要使用原始的

scope

。哦，只需使用

var overlyscope=scope.$new（false）

然后它应该继承父作用域，并使用

$scope.$parent