个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
开发一个 angular 应用程序，其中包含构建目录/嵌套树结构的功能...
我遇到的问题是节点的渲染没有按预期工作。
产品似乎仅在列表中已经存在产品节点并且可以创建部分时才呈现，但尝试向已添加的部分添加子部分不会呈现。部分和产品节点正按预期插入模型中 - 只是指令似乎不适用于原始模型中不存在的节点。
相关代码:
HTML
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Menu</h1>
<button ng-click="addSection()">Add</button>
<admin-sections sections="menu.sections"></admin-sections>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.menu = {
sections: [{
name: "NEW SECTION 1",
sections: [{
name: "NEW SECTION",
sections: [],
products: [{
"name": "Product",
"price": "0.00"
}]
}],
products: []
}]
};
$scope.addSection = function() {
$scope.menu.sections.push({
name: "NEW SECTION",
sections: [],
products: []
});
};
});
app
.directive('adminSections', function() {
return {
restrict: "E",
replace: true,
scope: {
sections: '='
},
templateUrl: 'sections.html'
};
})
.directive('adminSection', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
section: '='
},
templateUrl: 'section.html',
link: function(scope, element, attrs, controller) {
if (angular.isArray(scope.section.sections) && scope.section.sections.length > 0) {
element.append($compile('<admin-sections sections="section.sections"></admin-sections>')(scope));
}
if (angular.isArray(scope.section.products) && scope.section.products.length > 0) {
element.append($compile('<admin-products products="section.products"></admin-products>')(scope));
}
scope.addSub = function(section) {
section.sections.push({
"name": "NEW SECTION",
"sections": [],
"products": []
});
};
scope.addProduct = function(section) {
section.products.push({
"name": "Product",
"price": "0.00"
});
};
scope.deleteSection = function(section) {
var idx = scope.$parent.sections.indexOf(section);
scope.$parent.sections.splice(idx, 1);
};
}
};
})
.directive('adminProducts', function() {
return {
restrict: "E",
replace: true,
scope: {
products: '='
},
templateUrl: 'products.html',
link: function(scope, element, attrs, controller) {
scope.editProduct = function(product) {
if (product.price === undefined) {
product.price = 0;
}
element.append($compile('<productform product="product"></productform>')(scope));
};
scope.deleteProduct = function(idx) {
if (confirm('Are you sure you want to delete this product?\n\nClick OK to confirm.')) {
scope.products.splice(idx, 1);
}
};
}
};
})
.directive('adminProduct', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
product: '='
},
templateUrl: 'product.html',
link: function(scope, element, attr, controller) {
scope.editProduct = function(product) {
if (product.price === undefined) {
product.price = 0;
}
element.append($compile('<productform product="product" />')(scope));
};
scope.deleteProduct = function(idx) {
scope.$parent.deleteProduct(idx);
};
}
};
})
.directive('productform', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
product: "="
},
templateUrl: 'productform.html',
link: function(scope, element, attrs, controller) {
scope.orig = angular.copy(scope.product);
scope.ok = function() {
element.remove();
scope.$parent.editMode = false;
};
scope.cancel = function() {
scope.reset();
element.remove();
scope.$parent.editMode = false;
}
scope.reset = function() {
scope.product = angular.copy(scope.orig);
}
}
};
});
最佳答案
问题是在链接指令时添加列表，这取决于调用链接函数时部分的状态(只有一次，当 angular 看到它时)。
当你添加一个新的小节时，它是链接的，但它的小节列表是空的，所以它没有，结果元素没有小节，因为你添加了 admin-sections取决于调用链接函数时的子节数组状态，因此根本不会添加嵌套指令。
只需删除 if语句就足够了(或者只是检查它们是否是数组):
element.append($compile('<admin-sections sections="section.sections"></admin-sections>')(scope));
element.append($compile('<admin-products products="section.products"></admin-products>')(scope));
ng-repeat在您的指令中将观察每个部分中的部分数组并相应地更新列表，同时在数组为空时保持为空。
controller s 在解析任何内部指令之前运行，并且
link s 被追赶。因此，如果您有这样的嵌套指令:
<outer-directive>
<inner-directive></inner-directive>
</outer-directive>
admin-sections 时指令到每个部分的模板，解析器进入无限循环。解析每个部分意味着调用另一个
link该部分的小节，但使用
$compile在外
admin-section的链接函数意味着它将在处理外部指令后解析。
require (
docs ) 父指令以使用其 Controller 。
关于angularjs - Angular 嵌套指令未在模型中显示新实体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27935531/
26
4
0
可不可以命名为MVVM模型？因为View通过查看模型数据。 View 是否应该只与 ViewModelData 交互？我确实在某处读到正确的 MVVM 模型应该在 ViewModel 而不是 Mode
我正在阅读有关设计模式的文章，虽然作者们都认为观察者模式很酷，但在设计方面，每个人都在谈论 MVC。 我有点困惑，MVC 图不是循环的，代码流具有闭合拓扑不是很自然吗？为什么没有人谈论这种模式: mo
我正在开发一个 Sticky Notes 项目并在 WPF 中做 UI，显然将 MVVM 作为我的架构设计选择。我正在重新考虑我的模型、 View 和 View 模型应该是什么。 我有一个名为 Not
不要混淆:How can I convert List to Hashtable in C#? 我有一个模型列表，我想将它们组织成一个哈希表，以枚举作为键，模型列表(具有枚举的值)作为值。 publi
我只是花了一些时间阅读这些术语(我不经常使用它们，因为我们没有任何 MVC 应用程序，我通常只说“模型”)，但我觉得根据上下文，这些意味着不同的东西: 实体 这很简单，它是数据库中的一行: 2) In
我想知道你们中是否有人知道一些很好的教程来解释大型应用程序的 MVVM。我发现关于 MVVM 的每个教程都只是基础知识解释(如何实现模型、 View 模型和 View )，但我对在应用程序页面之间传递
我想realm.delete() 我的 Realm 中除了一个模型之外的所有模型。有什么办法可以不列出所有这些吗？ 也许是一种遍历 Realm 中当前存在的所有类型的方法？ 最佳答案 您可以从您的 R
我正在尝试使用 alias 指令模拟一个 Eloquent 模型，如下所示: $transporter = \Mockery::mock('alias:' . Transporter::class)
我正在使用 stargazer 创建我的 plm 汇总表。 library(plm) library(pglm) data("Unions", package = "pglm") anb1 <- pl
我读了几篇与 ASP.NET 分层架构相关的文章和问题，但是读得太多后我有点困惑。 UI 层是在 ASP.NET MVC 中开发的，对于数据访问，我在项目中使用 EF。 我想通过一个例子来描述我的问题
我收到此消息错误: Inceptionv3.mlmodel: unable to read document 我下载了最新版本的 xcode。 9.4 版测试版 (9Q1004a) 最佳答案 您没有
(同样，一个 MVC 验证问题。我知道，我知道......) 我想使用 AutoMapper ( http://automapper.codeplex.com/ ) 来验证我的创建 View 中不在我
需要澄清一件事，现在我正在处理一个流程，其中我有两个 View 模型，一个依赖于另一个 View 模型，为了处理这件事，我尝试在我的基本 Activity 中注入(inject)两个 View 模型，
如果 WPF MVVM 应该没有代码，为什么在使用 ICommand 时，是否需要在 Window.xaml.cs 代码中实例化 DataContext 属性？我已经并排观看并关注了 YouTube
当我第一次听说 ASP.NET MVC 时，我认为这意味着应用程序由三个部分组成:模型、 View 和 Controller 。 然后我读到 NerdDinner并学习了存储库和 View 模型的方法
Platform : ubuntu 16.04 Python version: 3.5.2 mmdnn version : 0.2.5 Source framework with version :
我正在学习本教程:https://www.raywenderlich.com/160728/object-oriented-programming-swift ...并尝试对代码进行一些个人调整，看看
我正试图围绕 AngularJS。我很喜欢它，但一个核心概念似乎在逃避我——模型在哪里？ 例如，如果我有一个显示多个交易列表的应用程序。一个列表向服务器查询匹配某些条件的分页事务集，另一个列表使用不同
我在为某个应用程序找出最佳方法时遇到了麻烦。我不太习惯取代旧 TLA(三层架构)的新架构，所以这就是我的来源。 在为我的应用程序(POCO 类，对吧？？)设计模型和 DAL 时，我有以下疑问: 我的模
我有两个模型:Person 和 Department。每个人可以在一个部门工作。部门可以由多人管理。我不确定如何在 Django 模型中构建这种关系。 这是我不成功的尝试之一 [models.py]:
我是一名优秀的程序员,十分优秀！