如何创建在angularjs一个独特的子范围有多大？ [英] How do I create a unique child scope in angularjs?

问题描述

我有问题，在angularjs手风琴创造每个小组一个子范围。

I am having problem creating a child scope for each panel in an angularjs accordion.

手风琴建成以这种格式使用数据：

The accordion is built up using data in this format:

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

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

The 2 objects in the array above contains

1. 部分每个小组和


2. 一个额外的ARGS对象，其中包含了我要在局部使用插值使用这样的额外信息{{args.key1}}或{{args.key2}}

在我的指导，我用这个code创建每个小组一个新的范围：

In my Directive, I use this code to create a new scope for each panel:

// 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覆盖。

The line 'panel.scope();' does not in fact create a new scope. The scope's id is the same as the main scope's id. Also, the first arg is overwritten by the second arg.

如果我试试这个：

panel.scope().$new()

这工作，但然后添加ARGS'的东西叫做$$ childTail（我使用的是镀铬调试器）：

This works but then it adds 'args' to something called $$childTail (I'm using chrome debugger):

scope.$$childTail.args

那么这意味着，{{args.key1}}不了，因为可变ARGS不再是主要适用范围，但在此$$ childTail事情。工作

Then this means that {{args.key1}} doesn't work anymore because the variable args is no longer on the main scope but on this $$childTail thing.

推荐答案

doThe解决方案，以创造手风琴每个小组一个新的范围也有自己的指令编译面板DOM元素，从而自动创建一个独特的范围。

doThe solution to creating a new scope for each panel in the accordion was to compile the panel DOM element with its own directive, thus automatically creating a unique scope.

1. 在标记（手风琴指令）我添加一个新类指令面板数据：

1. In the markup (in the Accordion Directive) I add a new class Directive 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>');

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

Then I created the new panelData Directive:

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

然后我用jQuery来选择每一个'手风琴内'，这是其中内容有云：

Then I used jQuery to select each 'accordion-inner' which is where the content goes:

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

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

Next I got the scope of each one:

var innerScope = innerElement.scope();

然后我打电话的效用函数添加的内容：

Then I called an utility function to add the content:

var accordionConent = addContentToInclude(contentBuffer, content);

然后我编的innerScope的accordionContent并追加到innerElement面板：

Then I compiled the accordionContent with the innerScope and appended it to the innerElement panel:

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

最后，当我来到了额外的参数添加到面板中populateExtraArguments（）函数，我所要做的就是让面板，把它变成一个角度元素，获取其作用域（panelData范围其实），然后添加额外的参数范围：

Finally, when I came to add the extra arguments to the panel in the populateExtraArguments() function, all I had to do was get the panel, turn it into an angular element, get its scope (the panelData scope in fact) and then add the extra arguments to the scope:

// 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一个独特的子范围有多大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！