Question

我在使用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.        
   });               
 }

第'line.scope（）;'行实际上并没有创建一个新的范围。范围的id与主范围的id相同。此外，第一个arg被第二个arg覆盖。

如果我试试这个：

panel.scope().$new()

这有效，但是它将'args'添加到一个名为$$ childTail的东西（我正在使用chrome调试器）：

scope.$$childTail.args

然后这意味着{{args.key1}}不再起作用，因为变量args不再在主范围内，而是在这个$$ childTail上。

Answer 1

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

在标记中（在手风琴指令中）我添加了一个新的类Directive面板 - 数据：

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

然后我创建了新的panelData指令：

angular.module('sgComponents').directive('panelData', [function () {
   return {
      restrict: 'C', // a class Directive
      scope: true // with its own unique scope
   };
}]);

然后我使用jQuery选择每个手风琴 - 内部＆＃39;这是内容的所在：
```
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.        
  });

}

如何在angularjs中创建唯一的子范围？

1 个答案: