相关疑难解决方法(0)

有一些流行的递归角度指令Q&A,它们都归结为以下解决方案之一:

• 根据运行时范围状态手动递增"编译"HTML
  • 示例1 [ stackoverflow ]
  • 例2 [ angular jsfiddles page ]
• 根本不使用指令,而是使用引用自身的<script>模板
  • 示例1 [ google groups ]

第一个问题是,除非您可以理解地管理手动编译过程,否则无法删除以前编译的代码.第二种方法存在的问题是......不是指令而忽略了它的强大功能,但更迫切的是,它不能像指令一样参数化; 它只是绑定到一个新的控制器实例.

我一直在玩手动做一个angular.bootstrap或@compile()在链接功能,但这让我有手动跟踪要删除和添加的元素的问题.

有一种很好的方法可以使用参数化递归模式来管理添加/删除元素以反映运行时状态吗？也就是说,一个带有添加/删除节点按钮的树和一些输入字段,其值从节点的子节点传递下来.也许是第二种方法与链式范围的组合(但我不知道如何做到这一点)？

这是我的Plunker:

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

单击该按钮时,应在"Hello World!"之前插入以下内容!跨度:

<script type="text/ng-template" id="tempTest">
  <div>
    <span>Properly Inserted</span> 
  </div>
</script>

当然,减去脚本标签.

我通过动态插入以下div实现此目的:

<div ng-include="tempTest"></div> 

然后编译它.但是,如果查看日志,编译后剩下的唯一内容是:

<!-- ngInclude: tempTest --> 

这里发生了什么？为什么我的插件没有正确编译？逻辑如下:

$scope.insert = function(){
    // Create elements //
    var container = angular.element('<div id="compiled-container"></div>');
    var element = angular.element('<div ng-include="tempTest"></div>');

    //Insert parent Container
    $('#greeting').before(container);

    // insert the element
    $animate.enter(element, container);

    // test insertion
    console.log("Before Compile: " +container.html() )

    $compile(element);

    //look again after compile
    console.log("After Compile:  " +container.html() )

};

我正在研究一个模块,我将有div元素嵌套在div元素中,div元素也可以嵌套在div元素中.这些div元素将在用户单击按钮时创建.div可能最终看起来像这样:

1. DIV1

   1.1.DIV2

   1.2.DIV3

   1.3.DIV4

      1.3.1 div5
   
      1.3.2 div6
   

   Run Code Online (Sandbox Code Playgroud)

2.div7

3.div8

等等......

这些div中的每一个都只是一个html模板,我想绑定每个div的数据,比如div有一个标题,所以我将绑定每个div.

我的第一个行动计划是使用ng-include并简单地由用户动态创建ng-includes,这样模板将通过ng-include加载.但是,正如我所知,由于依赖性问题,嵌套的ng-includes是不可能的.

我知道那些试图破解ng-includes嵌套的用户熟悉的库,但我正在寻找嵌套模板的好习惯,同时远离额外的库.

关于什么是动态嵌套模板的最佳方法的任何建议？

我需要这个

这是控制器代码:

$scope.sideNavMenu =
{
    title: "User Manual",
    subMenu: [
    {
        title: "Title one",
        link: "index/titleone.html",
        icon:"fa fa-caret-down",
        subMenu: []
    },
    {
        title: "Basic",
        link: "index/basic/basic.html",
        icon:"fa fa-caret-down",
        subMenu: [
        {
            title: "Basic Function",
            link: "index/basic/function.html",
            icon:"fa fa-caret-down",
            subMenu: []
        }]  
    }]
};

我已经有两个星期的时间试图解决了.请任何可以帮助我？

就这一点而言

<div id="MainMenu">
    <div class="list-group panel">
        <a href="#mainMenuContainer" class="list-group-item list-group-item-success strong" data-toggle="collapse" data-parent="#MainMenu">
        <i class="fa fa-home"></i>
        {{sideNavMenu.title}}
        <i class="fa fa-caret-down"></i>
        </a>
    <div ng-include ng-if="sideNavMenu.subMenu.length > 0" ng-repeat="navMenu in sideNavMenu.subMenu" onload="data = navMenu"  src="'menuTemplate.html'"class="collapse" id="mainMenuContainer">
    </div>
</div> …

我有一个在我的DOM中多次使用的模板.

<div ng-controller="theController">
    content does not matter
</div>

所以控制器多次被证实.这是一个问题,因为如果我把一个观察者放在控制器中

theController = function($scope) {
    $scope.$on('myVar', function() {
        // run one time for each time the template is repeated
    })
}

有关如何避免这种情况的任何想法？提前致谢.

UPDATE

好的,我会尽量让自己更清楚.

也许我有一个表单,它是根据异步请求的响应动态构建的.

<form ng-controller="formController">
    <div ng-repeat="f in fields">
        <ng-inclide src="f.fields"></ng-include>
    </div>
</form>

控制器是这样的:

function formController($scope) {
    $scope.fields = [{ template:'', ... }];
    // data come from an ajax request... 
    // here are static for the sake of simplicity.
}

所以我不知道表格中会附加哪些字段.

表单字段结构存储在html partials中......类似于:

<div ng-controller="inputController">
    <label> .... </label>
    <input type="text" …

我有一个具有递归关系的数据集的应用程序(树视图,使用递归.)我已经尝试了几种方法通过Angular实现这一点,但似乎没有一种方法可以提供可行的结果.

这里的想法是我希望使用一组嵌套列表渲染这些数据,允许多个(7+)级别的深度.为了简化(我的实际应用程序使用Restangular)我已经构建了以下plunker:

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

虽然"顶级"级数据正确呈现(只是第一个标题),但我尝试使用嵌套控制器进行递归似乎失败了.这里的想法是树中的每个"子"都使用它自己的控制器进行渲染,然后控制器可以渲染它的子节点,等等.我意识到嵌套控制器可能不是"最好的"方式,但经过多次搜索后我还没有找到"更好"的选择.

重要的是,最终的解决方案在此处保留了"嵌套"的概念(每个元素出现在其父元素下方,略有缩进.)

我正在寻找一种基于某些数据生成嵌套菜单的方法,我想解决的问题是:

我不知道每次有多少子级别的数据(它是动态的),我想基于ng-repeats的数据生成菜单.我想要一种生成菜单的方法,而无需对重复级别进行硬编码.因此,如果有2或10,它将填补自己.

所以现在我很难对重复级别进行编码,如下所示:

<ul class="outerMenu" >
        <li ng-repeat="level in globalMenu" ng-click="showSubs =! showSubs" >{{level.name}} {{level.subs.length}}
            <ul ng-if="level.subs.length > 0" ng-show="showSubs">
                <li ng-repeat="sub in level.subs" ng-click="$event.stopPropagation()">{{sub.name}}


                </li>

            </ul>
        </li>
    </ul>

所以我想知道是否有一种方法可以根据数据生成嵌套重复(这将继续在其自身内部).因此,JSON的1级下降看起来像这样.

 $scope.globalMenu = [
  {
    'name' : 'level 1',
    'subs' : [
            {
              'name' : 'level 1-1'
            },
             {
              'name' : 'level 1-2'
            },
             {
              'name' : 'level 1-3'
            },
             {
              'name' : 'level 1-4'
            }
            ]
  },
   {
    'name' : 'level 2'
  },
   {
    'name' : 'level 3'
  },
   { …

这是我的JSON数据:

"multipleLayerDropdown" : [
                                        {"title":"Google","url":"#"},
                                        {"title":"Another action","url":"#"},
                                        {"title":"Something else here","url":"#"},
                                        {"title":"More options", "submenu":[
                                                                             {"title":"Second Level 1","url":"#"},
                                                                             {"title":"Second Level 2","submenu":[ 
                                                                                                                   {"title":"Third Level 1","url":"#"},
                                                                                                                   {"title":"Third Level 2","url":"#"}
                                                                                                                   ]},
                                                                             {"title":"Second Level 3","url":"#"},
                                                                             {"title":"Second Level 4","submenu":[
                                                                                                                   {"title":"Third Level 1","url":"#"},
                                                                                                                   {"title":"Third Level 2","url":"#"}
                                                                                                                   ]}
                                                                             ]}

                         ]

我希望如下:

• 谷歌
• 另一个动作
• 还有别的什么
• 更多的选择
  • 二级1
  • 二级2
    • 第三级1
    • 第三级2
  • 第二级3
  • 二级4
    • 第三级1
    • 第三级2

上面的示例仅显示3个嵌套级别.如果嵌套数据大于3,则也会显示.例如,如果嵌套的JSON数据为5,则将显示其中的5个.任何人都知道如何显示所有嵌套的JSON数据(使用ng-repeat /任何其他angularjs方法)？