如何在angularjs中创建唯一的子作用域？

我在为angularjs手风琴中的每个面板创建子范围时遇到问题

手风琴使用以下格式的数据构建：

$scope.accordionData = [
        {'partial': 'desktop-ui/partials/test1.html', 'args':{'key1': $scope.args.users,'key2': 'http://www.sungard.com'}},
        {'partial': 'desktop-ui/partials/test2.html', 'args':{'key1': $scope.args.contacts,'key2': 'http://financialsystems.sungard.com/solutions/asset-management'}}
];

上面数组中的2个对象包含

每个面板的一部分，以及

一个额外的“args”对象，它包含我希望在使用类似于{{args.key1}}或{{args.key2}的插值的部分中使用的额外信息

在我的指令中，我使用以下代码为每个面板创建一个新范围：

// element is the accordion and panels is a jQuery list of panels for the accordion and dataList is the data 
function populatePanelsWithExtraArgs(element, dataList, panels) {               
   angular.forEach(dataList, function(data, index) { // for each panel         
      var dataArgs = data.args; // get the extra args
      var panel = panels[index]; // get each panel from the jQuery list
      panel = angular.element(panel); // convert to angular element
      var childScope = panel.scope(); // create a new scope HERE IS THE PROBLEM
      childScope.args = dataArgs; // add the args to each panel's scope.        
   });               
 }

行“panel.scope（）；”实际上不会创建新的作用域。作用域的id与主作用域的id相同。此外，第一个参数被第二个参数覆盖

如果我尝试这样做：

panel.scope().$new()

这是可行的，但随后它将“args”添加到名为$$childTail的内容中（我正在使用chrome调试器）：

---

这意味着{{args.key1}}不再工作，因为变量args不再在主作用域上，而是在$$childTail上。

为accordion中的每个面板创建新作用域的解决方案是使用自己的指令编译panel DOM元素，从而自动创建唯一的作用域

在标记（在Accordion指令中）中，我添加了一个新的class指令panel data：

var panel = '<div class="accordion-body collapse in panel-data"><div class="sg-accordion-inner-wrapper"><div class="accordion-inner"></div></div></div>');

然后，我使用jQuery选择每个“accordion inner”，这就是内容所在的位置：

var innerElement = thisElement.find('.accordion-inner');

接下来我得到了每一个的范围：

var innerScope = innerElement.scope();

然后我调用了一个实用函数来添加内容：

var accordionConent = addContentToInclude(contentBuffer, content);

然后，我用innerScope编译了accordionContent并将其附加到innerElement面板：

 innerElement.append($compile(angular.element(accordionContent))(innerScope));

最后，当我在populateExtraArguments（）函数中将额外参数添加到面板中时，我所要做的就是获取面板，将其转换为角度元素，获取其范围（事实上是panelData范围），然后将额外参数添加到范围中：

// element is the accordion and panels is a jQuery list of panels for the accordion        
and dataList is the data 
function populatePanelsWithExtraArgs(element, dataList, panels) {               
   angular.forEach(dataList, function(data, index) { // for each panel         
      var dataArgs = data.args; // get the extra args
      var panel = panels[index]; // get each panel from the jQuery list
      panel = angular.element(panel); // convert to angular element
      var childScope = panel.scope(); // get the scope
      childScope.args = dataArgs; // add the args to each panel's scope.        
  });               

}

---

见@JoseM谢谢，我会读一读的。

 innerElement.append($compile(angular.element(accordionContent))(innerScope));

// element is the accordion and panels is a jQuery list of panels for the accordion        
and dataList is the data 
function populatePanelsWithExtraArgs(element, dataList, panels) {               
   angular.forEach(dataList, function(data, index) { // for each panel         
      var dataArgs = data.args; // get the extra args
      var panel = panels[index]; // get each panel from the jQuery list
      panel = angular.element(panel); // convert to angular element
      var childScope = panel.scope(); // get the scope
      childScope.args = dataArgs; // add the args to each panel's scope.        
  });