angular js中的递归指令
在AngularJS中，递归指令是一种特殊类型的指令，用于在模板中创建递归结构。递归指令允许在模板中使用相同的指令来生成嵌套的HTML元素。
递归指令通常用于处理树状结构或嵌套的数据结构，例如文件夹结构、评论回复、有层次关系的列表等。
在AngularJS中，实现递归指令的一般步骤如下：
- 定义递归指令：使用
app.directive()方法来定义一个指令，指定其名称和递归属性。 示例代码： - 定义递归指令：使用
app.directive()方法来定义一个指令，指定其名称和递归属性。 示例代码： - 上述代码定义了一个名为
recursiveDirective的递归指令，其中template属性中定义了递归结构的HTML模板，通过ng-repeat指令实现了递归调用。 - 在模板中使用递归指令：使用自定义的递归指令来生成递归结构。 示例代码：
- 在模板中使用递归指令：使用自定义的递归指令来生成递归结构。 示例代码：
- 上述代码使用了名为
recursiveDirective的递归指令，并传入了一个treeData对象作为数据源。
递归指令的优势在于它能够简化处理复杂嵌套结构的模板代码。通过递归指令，我们可以使用相同的指令来处理不同层次的数据，提高了代码的重用性和可维护性。
递归指令的应用场景包括但不限于：
- 展示树状结构数据：递归指令可以用于展示文件夹结构、分类目录等树状结构数据。
- 评论回复：递归指令可以用于实现评论回复功能，允许用户回复其他用户的评论，并嵌套显示回复的回复。
- 多层级列表：递归指令可以用于处理多层级的有序列表，例如带有章节、子章节、小节等层级结构的文档。
腾讯云提供的相关产品中，可以使用云服务器、云数据库等来支持和扩展基于AngularJS的递归指令应用。具体产品和介绍链接如下：
- 腾讯云服务器（CVM）：提供安全、可靠、高性能的云服务器实例，支持各类应用的部署和扩展。详情请参考：腾讯云服务器
- 腾讯云数据库MySQL版：提供高性能、高可用的关系型数据库服务，适合存储和管理应用的数据。详情请参考：腾讯云数据库MySQL版
- 腾讯云对象存储（COS）：提供安全可靠、低成本的云端存储服务，适合存储和管理应用中的各类文件和媒体资源。详情请参考：腾讯云对象存储
通过以上腾讯云的产品，您可以构建和部署支持递归指令的AngularJS应用，并获得可靠的云计算基础设施和存储能力的支持。
相关·内容
3回答
请求模板的多个指令
、、、
错误：$compile:multidir多条指令状态框，询问模板的状态箱：
(在控制台上)
内部index.html
<script src="js/dashboard/dashboard.module.js"></script>
<script src="js/dashboard/dashboard.component.js"></script>
<script src="js/dashboard/statbox.component.js"></script>
内部
浏览 9提问于2017-03-27得票数 10
回答已采纳
我想要创建一个树状结构，用户可以在这里拖放树叶。我的出发点如下：
<div ng:controller="controller">
<ul ui-sortable ng-model="items" ui-options="{connectWith: '.item'}" class="item">
<li ng-repeat="item in items" class="item">
{{ item.name }}
浏览 1提问于2013-01-12得票数 9
回答已采纳
1回答
我对均值叠加比较陌生，我正试图在一个项目中包含一个角甘特图。根据github上的文档，我遵循了所有的步骤，但是我不断地发现一些错误。以下是我所采取的步骤的简要概述。
安装角度甘特图使用
安装角钢-甘特-保存
我使用以下方法查找依赖项：
咕噜绳
我将资产/转角-gantt.js和资产/gant.css添加到了由yo env生成的config/env/all.js文件中。
我在publlic/config.js文件中将gantt模块包含到我的角应用程序模块中
5.我还在角-甘特文件夹中发出咕噜声，以构建角-gantt.min.js和角-gantt.js，我还意识到这些文件还
浏览 3提问于2014-11-04得票数 0
回答已采纳
1回答
嵌套复杂指令不被执行？
、、、
我试图遵循 by ，在这里，他通过将指令分类为组件和容器来解释指令。
因此，我尝试这样做，有一个容器(幻灯片)将容纳不同的项目(文本区域，图像，视频.)但我的例子更有活力。
他的例子是这样的：
<panel title="{{title}}">
<element text="{{body}}"></element>
</panel>
但我的更像这样：
<slide ng-repeat="slide in slides" slide-id="{{slide.id}}">
浏览 3提问于2013-04-24得票数 0
回答已采纳
我们总是使用属性ng-app。
<body ng-app="MyApp">
...
</body>
angular.js的代码是如何检测到这一点并安装特殊监视程序的？
也许有这样的功能？
function onHtmlTagEncounter(tag){
if(tag.hasAttribute("ng-app")){
//Scan document and do interpolation and other...
}
}
浏览 0提问于2015-09-20得票数 0
回答已采纳
当我使用angular的指令时，我得到了这个错误。
Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element. /apps/dhe.techForm/views/directives/header.html
http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=header&p1=%2Fapps%2Fdhe.techForm%2Fviews%2Fdirectives%2Fheader.h
浏览 0提问于2016-02-26得票数 0
下面是我正试图解决的问题:从一组变量小部件生成表单，在这些小部件中，精确的小部件及其排序由数据(即模式)指导。我采取的第一种方法看起来像是(省略不必要的细节)：
controller.js：
angular.module('app').controller(function($scope) {
$scope.data = {
actions: [{
name: 'Action1',
base: 'nova.create_server',
baseInput: {
flavorId:
浏览 3提问于2015-01-03得票数 1
回答已采纳
我是angular (和javascript)的新手。我正在尝试构建一个指令，其中一部分需要向指令的作用域中添加一个数组。我的指令代码如下所示：
.directive("startupSections", function(){
return {
restrict: "E",
transclude: true,
scope: {
title: "@",
sections: [1,2,3]
},
link: fun
浏览 2提问于2017-05-03得票数 0
TypeError:无法在对象的scripts/lib/ui-bootstrap-tpls-0.6.0.js:2209:10 (脚本/lib/angular.min.js:43:447)的脚本(本机)q(脚本/lib/angular.min.js:7:280)的Array.forEach (本机)的TooltipFactory (脚本/lib/angular.min.js:3147:43)处读取未定义的属性'toLowerCase‘。(scripts/lib/angular.min.js:43:414)位于Object.d at scripts/lib/angular.mi
浏览 3提问于2014-07-09得票数 1
1回答
我有两个指令，我想在其中一个中公开一个API，供其他人使用。在的指导下，当我需要另一个指令的控制器时，我得到了这个错误：
Error: No controller: foo
at Error (<anonymous>)
at getControllers (http://localhost:3000/vendor/angular/angular.js:4216:19)
at nodeLinkFn (http://localhost:3000/vendor/angular/angular.js:4345:35)
at compositeLinkFn (
浏览 2提问于2013-03-30得票数 3
我需要一个“粘性”指令，当它位于页面顶部时，它会向元素中添加一个css类，并指示其状态的变化。因此，我定义了一个类似于{ onStickyChange: '&' }的范围。现在我想在angularjs组件中使用该指令，如下所示：
<my-component sticky on-sticky-change="$ctrl.onStickyChange(sticky)">
</my-component>
当被粘贴/未粘贴时，我希望指令会通知父控制器。但是，我得到了以下错误：
错误：$compile:multidir多个指令myComp
浏览 4提问于2017-07-19得票数 1
回答已采纳
我是AngularJS的新手。从脚本开始，在开发过程中运行良好，上传到产品后，我在我的控制器中获得了RangeError。我对这个错误感到困惑，即使我用谷歌搜索也没有解决：
下面是我在routeProvider上的脚本：
.when('/customer/detail/:id', {
title: 'Customer Detail',
templateUrl: 'templates/customer_detail.html',
resolve: {
app: function($q,
浏览 0提问于2018-10-10得票数 1
回答已采纳
这里发生了什么事？
以下是我的指令：
app.directive('submitRequired', function (objSvc) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
// do something
}
};
});
以下是正在使用的指令的示例：
<input submit-required="true"></input>
浏览 82提问于2014-02-16得票数 88
回答已采纳
1回答
如何动态更改活动类
、、、、
错误出现在ul-> li ->中，请按ng键.当我单击时，类active不会改变。这是我的index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
<meta charset="UTF-8">
<title>Talent Exhibition</title>
<script type="text/javascri
浏览 1提问于2014-09-21得票数 0
回答已采纳
总是收到错误:找不到指令“datepicker”所需的控制器“ngModel”！
如果我在另一个应用程序中移动相同的代码，它可以完美地工作，所以我缺少的是
<p class="input-group">
<input type="text"
datepicker-popup="{{format}}"
ng-model="fromdate"
is-open="open"
ng-required=&
浏览 2提问于2015-08-27得票数 1
我正在实验并尝试使用angular.element (jQuery包装器)在角的config()函数中。但是，在main.js文件中，一旦我将dep添加到角下，它就会生成$injector:modulerr错误(其中第一个注释是)
脚本标记就放置在我的html文件中。
<script src="js/vendor/require.min.js" data-main="js/own/main.js"></script>
main.js文件
require.config({
baseUrl: "js/vendor/",
浏览 2提问于2014-07-25得票数 2
回答已采纳
2回答
递归调用的指令崩溃浏览器选项卡
、、、、
我有一个呈现observation.html的观察指令
observation.js
angular.module('bahmni.clinical')
.directive('observation', function () {
var controller = function ($scope) {
console.log($scope.observation);
};
return {
restrict: 'E',
controller: controller,
浏览 5提问于2014-10-09得票数 2
回答已采纳
嗨，我正在尝试让下拉指令从UI引导程序开始工作。每当我尝试使用“下拉”指令时，都会收到以下错误消息：
控制台错误消息：
Multiple directives [dropdown, dropdown] asking for 'dropdown' controller on: <li class="dropdown pos-stc" dropdown="">
http://errors.angularjs.org/1.3.9/$compile/multidir?p0=dropdown&p1=dropdown&p2=
浏览 3提问于2015-01-17得票数 4
回答已采纳
2回答
角条件多选择指令
、、
我正在创建一个选择框指令，作为其中的一部分，我需要指定select是否为多个。
我尝试在我的一个作用域对象中设置一个多个属性，假设它将在选择箱上执行并设置multiple="multiple"，其值为" multiple“，如下所示：
<select multiple="{{properties.multiple}}" /*...(other working properties)...*/ ></select>
但这让我犯了个错误..。
Error: [$compile:selmulti] http://errors.angul
浏览 6提问于2015-09-14得票数 0
回答已采纳
2回答
我尝试在angularjs中实现一个递归嵌套指令。
我只是简单地创建了一个<tree-dir>指令，并获得了这个。
在我的tree_item_renderer.html模板中，如果我将ng-include替换为<tree-dir>，angular将在编译时进入无限循环(如果您尝试它，请小心，它会减慢或停止您的浏览器一段时间)。
来源:关于angular中的递归树的。
浏览 1提问于2014-08-04得票数 3
2回答
我是第一次使用angularjs，我试图创建一个指令，但是我无法避免这个错误：
Error: Unknown provider: $scopeProvider <- $scope <- someDirectiveDirective createInjector/providerInjector<@http://localhost:4242/js/lib/angular/angular.js:2734 getService@http://localhost:4242/js/lib/angular/angular.js:2862 createInjector/instanceCa
浏览 6提问于2013-08-06得票数 3
回答已采纳
我正在尝试使用AngularJS中的$compile。我正在阅读如何在中使用$compile。在我的应用程序中写的，在启动了查看错误之后
我的代码：
@EnumeratorDirective = () ->
restrict: 'A'
scope:
count: '@uiCount'
link: (scope, element) ->
scope.size = element.val().length
element.bind 'keyup', () ->
浏览 7提问于2013-06-22得票数 0
回答已采纳
1回答
角度使用匿名函数
、、
我需要使用使用匿名函数调用控制器的指令在仪表板中显示两个列的表，并且在angular.js模块中接收错误：
index.html页面
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-ro
浏览 0提问于2015-12-15得票数 0
在尝试通过require.js加载时，我在以下代码中未定义
HTML
<script data-main="application/main" src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>
main.js
require.config({
baseUrl: "application",
paths: {
angular: 'https://code.angularjs.o
浏览 1提问于2015-09-20得票数 0
1回答
我有以下从服务器接收的数据
{
name: "Sam {{{{aaa}}}}"
}
在angular中，我使用以下代码将其打印出来
<span>{{name}}</span>
预期输出为
<span>Sam {{{{aaa}}}}</span> <!-- I dont want the curly braces here to act as a variable -->
但它抛出了一个错误。看起来Angular也在尝试插入字符串name。如何告诉Angular将其视为惰性字符串而不是变量？
我还探索了使用自定义
浏览 0提问于2016-03-01得票数 0
我的基于angularjs(1.2.14)的应用程序在IE10中加载得很好。但是，在IE11中，模板url被阻塞，应用程序没有正确呈现。下面是我在控制台中看到的错误。我看到这是一个已知的问题，但已经解决了()
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: resources/partials/overview.start.html
http://errors.angularjs.org/1.2.14/$sce/insecurl?p0=resou
浏览 0提问于2014-09-16得票数 0
回答已采纳
我有一个Angular JS v1.2.5表单，它不能在IE11中工作。它在Firefox，Chrome，Safari上运行良好。我的表单使用了一个文本区域，并在占位符属性中插入。
<body ng-controller="MainCtrl">
<p>Hello {{ name }}!</p>
<textarea rows="4" placeholder="Description of the {{ name }}"></textarea>
</body&g
浏览 0提问于2013-12-18得票数 16
回答已采纳
1回答
我正在努力理解安圭拉的JS指令。但是，我对父控制器和指令之间的范围和关系感到困惑。例如：
1)我将"hello-world“指令(它有自己的控制器，请检查下面的代码)插入到"myCtrl”中，我指的是作为一个孩子。
2)指令中有一个变量"directiveVar“和控制器中的其他变量"controllerVar"，每个变量都有不同的值。
3)我的困惑如下：
由于myCtrl是"hello-world“指令的父函数，因此默认情况下，"hello-world”指令作用域可以从控制器继承变量。
但是我也可以在父变量中看到子变量"
浏览 0提问于2016-01-15得票数 0
因此，我对Angularjs并不熟悉，但我正在尝试为评论区编写代码，用户可以在其中发表评论。为此，我使用带有conteneditable="true“属性的div元素。以下是我的html代码：
<html>
<script src="./includes/angular.min.js"></script>
<script src="./includes/angular.route.js"></script>
<script src="./includes/a
浏览 5提问于2016-12-25得票数 3
回答已采纳
我正在尝试为指令编写测试，所以我使用$compile手动构建它。(是的，我知道我可以使用e2e测试，但在本例中，我想测试一些独立于DOM的逻辑，所以我使用单元测试方法。)
我有一个用scope: {foo: '='}绑定到的字段。当我试图在指令的作用域上设置它时，我得到了以下错误：
Error: Non-assignable model expression: undefined (directive: foo)
at Error (<anonymous>)
at $get.parentSet (https://ajax.googleapis.com
浏览 0提问于2012-11-28得票数 16
回答已采纳
这里发生了什么事？
以下是我的指令：
// template <input ng-model="theModel" />
app.directive('bseInput', function () {
return {
templateUrl: "/Scripts/bse/bse-inputs.html",
scope:
{
theModel: '=',
},
compile: function compi
浏览 1提问于2014-02-16得票数 15
回答已采纳
似乎AngularJS在处理HTML模板第一行中的注释时遇到了问题。
控制台给出了以下错误：
Error: [$compile:tplrt] http://errors.angularjs.org/1.3.15/$compile/tplrt?p0=deviceItem&p1=deviceItem.html
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:6:417
at https://cdnjs.cloudflare.com
浏览 2提问于2015-04-03得票数 0
回答已采纳
2回答
朋友们，我是一个AngularJS新手，我正在尝试使用Angular创建一个绑定到模型层次结构的基本HTML层次结构。我的顶级模块如下所示：
angular.module('fooApp'，'ngResource'，'myList')，在我的页面的根目录中声明为ng-app="fooApp“。
然后在我的页面中有如下所示的HTML：
<my-item-list/>
我有第二个模块，看起来像这样：
var myList = angular.module('myList', []);
myList.directiv
浏览 0提问于2013-06-04得票数 2
回答已采纳
我正在用Angular (Angular2 RC4)创建一个简单的应用程序，我发现很难在nodejs的实时服务器上运行这个应用程序。
我想帮助我可以做些什么来解决出现在Chrome控制台上的错误。
控制台Chrome中的错误：
browser_adapter.ts:82
EXCEPTION: Template parse errors:
Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and
浏览 2提问于2016-07-23得票数 18
2回答
既然我是新来的，我会自我介绍。我的名字是来自荷兰的Tomas，我刚刚开始进行密集的编码。自动取款机，我正在用AngularJS写一个项目，给我写一个交互式的简历。我想这样做，所以我在申请工作时有一些东西要展示。因此，有些事情我可能会做得比他们更难，只是为了表明我现在能做些什么。
好，回到问题上来。我在HTML代码中使用AngularJS指令时遇到了问题。
.JS文件是：
/**
* Created by Tomas on 24-1-2016.
*/
var myApp = angular.module("PersonApp",[])
.controller("To
浏览 5提问于2016-01-24得票数 3
我的问题是，在仍然处于混合模式(使用Angular2 )的情况下，我试图在ES5中创建一个ES5属性指令。所以所有的Angular2代码都被转换成NG1，这是通过使用UpgradeAdapter的'downgradeNG2Component‘函数来完成的，但是由于我正在创建一个指令，而不是一个组件，所以我需要使用一个'downgradeNG2Directive函数’，尽管它并不存在。
但是你就不能用NG1编写它吗？->，不，我正在从角度1移植到2，并且需要代码本身是Angular2
该指令只是一个简单的autoFocus指令，只要“li公共自动焦点”是一个属性，它就会聚焦
浏览 3提问于2016-07-22得票数 4
1回答
部分引导映射
、、、
最近，我试图使用anuglar本机ui.map将地图合并到局部。Hovewer，在引导地图控制器之前，我的部分似乎正在尝试初始化它。如何按照顺序初始化所有元素？
app.js
var app = angular.module('mapApp', ['ngRoute', 'ngResource', 'mainControllers', 'ui.bootstrap', 'ui.map']).config(['$routeProvider',
function($routeProvider
浏览 2提问于2014-10-20得票数 0
2回答
几个小时以来，这完全把我逼得不可开交。
我有我的app.js
'use strict';
/**
* @ngdoc overview
* @name myWellnessTrackerApp
* @description
* # myWellnessTrackerApp
*
* Main module of the application.
*/
angular
.module('myWellnessTrackerApp', [
'ngAnimate',
'ngCookies',
浏览 4提问于2015-02-11得票数 0
回答已采纳
在花了最后一天努力完成这项工作之后，我发现我已经回到了我刚开始时遇到的错误：
错误:意外请求:gettest-directive.html
我用卡玛和茉莉花在角上测试指令。我在StackOverflow上看过类似的问题，但发现在其他示例中尝试过的所有问题都是徒劳的。
码结构
测试-应用程序
-src
--保龄球
-解放组织
--js
-单元
-testDir
-test.js
-测试
-test.spec.js
-test
-配置
-Karma.conf.
-e2e
因果报应
'use strict';
module.exports = function(config){
浏览 1提问于2014-04-04得票数 25
回答已采纳
1回答
尝试学习angluar路由构造但我在实现ngRoute方面失败了
我的应用程序的定义
var app= angular.module('app', ['ngMaterial', 'ngRoute']);
配置
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
我的指令是使用路由器
app.directive("applicationDir
浏览 4提问于2017-04-25得票数 0
回答已采纳
我已经用AngularJS和一些基于引导的额外工具开发了一个应用程序。现在我想测试所有的东西。但我对卡玛和茉莉有意见。问题是当我启动测试时业力创造了一个例外..。
例外是一个TypError，对象不是一个方法(对不起，它是法语在我的控制台上)
这是我的karma.conf.js：
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'src/test/lib/angular/angular.js'
浏览 1提问于2014-08-27得票数 0
回答已采纳
2回答
我有一个指令，它是一个国家的下拉，我将在一个应用程序中对其进行回顾。我创建了一个链接函数，以便将数据返回给控制器，控制器绑定到使用该指令的视图。
directive.js
myAppModule.directive('countryDropdown', ['genericService', function (genericService) {
return {
templateUrl: 'Scripts/app/templates/tmplCountryDropdown.html',
浏览 2提问于2015-08-17得票数 2
回答已采纳
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.10.9 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket lJGhX9DakX2lChvLXtju
WARN [web-server]: 404: /lang/en-US.json
WARN [web-server]: 404: /api
浏览 1提问于2014-02-18得票数 4
回答已采纳
2回答
我试图从这里集成一个角UI分页指令，-> 。
问题是，当我单击任何分页按钮时，都会得到以下错误。
Error: [$compile:nonassign] Expression 'undefined' used with directive 'pagination' is non-assignable!
http://errors.angularjs.org/1.3.0-beta.7/$compile/nonassign?p0=undefined&p1=pagination
at https://ajax.googleapis.com/aja
浏览 0提问于2014-05-07得票数 2
回答已采纳
2回答
指令：
'use strict';
var foodMeApp = angular.module('foodMeApp', ['ngResource', 'breeze.angular.q']);
foodMeApp.directive('angularReleases', function(){
return {
restrict :'EA',
link : function($scope, $http){
$http.get('http://ap
浏览 2提问于2014-03-14得票数 0
回答已采纳
3回答
我看到了这样创建的指令：
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templ
浏览 3提问于2015-06-12得票数 0
回答已采纳
我从我写的一个自定义指令中得到了这个错误：
Error: [$compile:nonassign] http://errors.angularjs.org/1.2.16/$compile/nonassign?p0=&p1=fileUpload
at Error (native)
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
h.$digest angular.js:12270
h.$apply angular.js:12516
oFReader.onload file-uplo
浏览 3提问于2014-06-13得票数 4
回答已采纳
1回答
我正在尝试使用Angular捕获现有DOM项选择上的单击事件：
代码如下：
<!--
HTML template (section) - it's a django template, i kept the
django template syntax as original, using '{{' and '}}', and for
AngularJS templating's system '{$' and '$}'
-->
<fieldset class="modul
浏览 4提问于2014-11-12得票数 0
我有一个用户界面，允许用户输入他想要的任何值(字符串值)。
该值可以包含任何字符，包括{{和}}，例如{{.}}或{{/}}。
值的例子
text{{.}}heretext{{\}}here
我有一个使用angularjs的jsp页面，它使用<c:out value="${stringValue}"/>显示这个值。
我的错误是
angular.js:15697 Error: [$parse:syntax] Syntax Error: Token '.' not a primary expression at column 1 of the expre
浏览 14提问于2022-09-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
