本文介绍了如何创建在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一个独特的子范围有多大?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

  • 08-11 02:51