如何在angularjs中创建一个独特的子范围？

Question

我有一个问题，为每个面板在一个角手风琴儿童范围。

手风琴是使用这种格式的数据建立的：

$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'}}
];

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

1. 每个面板的部分和
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相同。另外，第一个arg被第二个arg覆盖。

如果我试试这个：

panel.scope().$new()

这是可行的，但随后它将“args”添加到名为$$childTail的内容(我使用的是铬调试器)：

scope.$$childTail.args

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

Answer 1

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

1. 在标记(在手风琴指令中)中，我添加了一个新的类指令面板-数据： var panel = '')；
2. 然后我创建了新的panelData指令： angular.module('sgComponents').directive('panelData'，函数() {返回{限制：'C'，//类指令作用域: true //具有它自己的唯一作用域}；}；
3. 然后，我使用jQuery来选择每一个内容所在的“手风琴内部”： var innerElement =thisElement.find(‘..accordion inner’)；
4. 接下来，我得到了每一个的范围： var innerScope = innerElement.scope()；
5. 然后，我调用一个实用程序函数来添加内容： var accordionConent = addContentToInclude(contentBuffer，content)；
6. 然后，我用accordionContent编译了innerScope并将其附加到innerElement面板中： innerElement.append($compile(angular.element(accordionContent))(innerScope))；
7. 最后，当我在populateExtraArguments()函数中向面板添加额外的参数时，我所要做的就是获取面板，将其转换为角元素，获取其作用域(实际上是panelData作用域)，然后将额外的参数添加到作用域中： // element是手风琴，面板是手风琴面板的jQuery列表，dataList是数据函数populatePanelsWithExtraArgs(element，dataList，panel ){ angular.forEach(dataList，function( data，index) ){ //对于每个面板var dataArgs = data.args；//获取额外的args var面板= panel索引；//获取jQuery列表面板=angular.element(面板)中的每个面板；//转换为角元素var childScope = panel.scope()；//获取作用域childScope.args = dataArgs；//将args添加到每个面板的作用域。)；}