jQuery Angularjs - 使用指令或小部件动态更改 dom？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11853484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs - Dynamically change dom with directives or widgets?
提问by kman
my goal is to understand how to use angularJS correctly. I want to be able to tie a selection of variable to dynamically changing the DOM structure using angularJS. I dont think I'm quite understanding the documentation that angular provides and I haven't found any examples here or otherwise. Any help is appreciated.
我的目标是了解如何正确使用 angularJS。我希望能够使用 angularJS 将选择的变量与动态更改 DOM 结构联系起来。我认为我不太了解 angular 提供的文档，我在这里或其他地方都没有找到任何示例。任何帮助表示赞赏。
The idea is that I have this use case where I first start with the selection of the type and from that type selected, the appropriate input type elements will be created and then recorded later with the ng-model (from textareas to checkboxes for example), all the while controlled by the angularjs controller for validation/restrictions. I'm used to the idea of having clone-able elements on the page and destroying and creating new with jQuery, but I've been reading that controllers should not have this logic and should instead be created with directives/widgets. I dont see any examples of directives or widgets being manipulated in this way however so I'm not even sure how to proceed. Can I use directives to manipulate the DOM in this way, not just once but multiple times based on a watched element?
这个想法是我有这个用例，我首先从类型的选择开始，从选择的类型开始，将创建适当的输入类型元素，然后用 ng-model 记录（例如从文本区域到复选框） ，一直由 angularjs 控制器控制以进行验证/限制。我习惯了在页面上拥有可克隆元素并使用 jQuery 销毁和创建新元素的想法，但我一直在读到控制器不应该具有这种逻辑，而应该使用指令/小部件创建。我没有看到任何以这种方式操作指令或小部件的示例，所以我什至不确定如何继续。我可以使用指令以这种方式操作 DOM，而不是一次而是基于一个被监视的元素多次？
Example of what I would like to do.
我想做什么的例子。
$scope.types = ['Type1','Type2']
// something along the lines of...
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}
Select Type 1:
选择类型 1：
- Show 2 text areas
- 显示 2 个文本区域
Select Type 2:
选择类型 2：
- Show a numeric input
- Show a date picker
- 显示数字输入
- 显示日期选择器
Thanks,
谢谢，
-JR.
-JR。
回答by Liviu T.
This is how I would do it. Note that this is a just a starting point. There is still a matter of binding to particular values in the corresponding inputs. I hope it helps.
这就是我要做的。请注意，这只是一个起点。仍然存在绑定到相应输入中的特定值的问题。我希望它有帮助。
Markup:
标记：
<html ng-app="App" ng-controller="MainCtrl">
<body>
<component index="0"></component>
<component index="1"></component>
Current type: {{type}}
<button ng-click="toggleType()">Toggle</button>
</body>
</html>
Directive:
指示：
var ngApp = angular.module('App', []).directive('component', function() {
var link = function(scope, element, attrs) {
var render = function() {
var t = scope.layouts[scope.type][attrs.index];
if (t === 'textarea') {
element.html('<' + t + ' /><br>');
}
else {
element.html('<input type="' + t + '"><br>');
}
};
//key point here to watch for changes of the type property
scope.$watch('type', function(newValue, oldValue) {
render();
});
render();
};
return {
restrict : 'E',
link : link
}
});
Controller:
控制器：
var MainCtrl = function MainCtrl($scope) {
$scope.type = 'Type1';
$scope.types = [ 'Type1', 'Type2' ];
$scope.layouts = {
'Type1' : [ 'textarea', 'textarea' ],
'Type2' : [ 'number', 'text' ]
};
$scope.toggleType = function() {
if ($scope.type === 'Type1') {
$scope.type = 'Type2';
}
else {
$scope.type = 'Type1';
}
};
};
回答by Chris
The most drop dead easy way I can think of doing this is by just using ng-show and ng-hide.
我能想到的最简单的方法就是使用 ng-show 和 ng-hide。
http://jsfiddle.net/cfchase/Xn7PA/
http://jsfiddle.net/cfchase/Xn7PA/
<select ng-model="selected_type" ng-options="t for t in types">
</select>
<div ng-show="selected_type=='Type1'">
<input type="text" id="text1" ng-model="text1"/>
<input type="text" id="text2" ng-model="text2"/>
</div>
<div ng-show="selected_type=='Type2'">
<input type="number" id="numeric1" ng-model="numeric1"/>
<input type="date" id="date1" ng-model="date1"/>
</div>
Of course you could clean this up without putting any logic in the html, but I didn't want to cloud the issue with extra stuff in the controller.
当然，您可以在不将任何逻辑放入 html 的情况下进行清理，但我不想在控制器中使用额外的内容来掩盖问题。
For validation, refer to the forms documentation. It's likely you will use mostly the AngularJS built in validation with some custom ones you build.
有关验证，请参阅表单文档。您可能会主要使用 AngularJS 内置验证和一些您构建的自定义验证。
As for directives, the online docsare dense, but it will click after you've experimented for awhile. For a gentler introduction, Jon Lindquist has a hello world tutorial on YouTube. Directives are definitely the way to do DOM manipulation in Angular.
至于指令，在线文档很密集，但在您尝试一段时间后它会点击。为了更温和的介绍，Jon Lindquist 在YouTube 上有一个 hello world 教程。指令绝对是在 Angular 中进行 DOM 操作的方式。
