我的目标是了解如何正确使用 angularJS。我希望能够使用 angularJS 将变量的选择与动态更改 DOM 结构联系起来。我认为我不太理解 Angular 提供的文档，并且我没有在这里或其他地方找到任何示例。如有任何帮助，我们将不胜感激。
我的想法是，我有一个用例，首先选择类型，然后从选择的类型中创建适当的输入类型元素，然后使用 ng-model 进行记录(从文本区域到复选框)例如)，始终由 angularjs Controller 控制以进行验证/限制。我习惯了在页面上拥有可克隆元素并使用 jQuery 销毁和创建新元素的想法，但我一直在读到 Controller 不应该具有这种逻辑，而应该使用指令/小部件来创建。然而，我没有看到任何以这种方式操纵指令或小部件的示例，所以我什至不确定如何继续。我可以使用指令以这种方式操作 DOM，不仅仅是一次，而是基于监视的元素多次？
我想做的事情的示例。
$scope.types = ['Type1','Type2']
// something along the lines of...
$scope.layouts = {'Type1':['textarea','textarea'], 'Type2':['numeric','datepicker']}
选择类型 1:
- 显示 2 个文本区域
选择类型 2:
- 显示数字输入
- 显示日期选择器
最佳答案
我就是这么做的。请注意，这只是一个起点。仍然存在绑定(bind)到相应输入中的特定值的问题。我希望它有帮助。
标记:
<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>
指令:
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';
}
};
};
关于jquery - Angularjs - 使用指令或小部件动态更改 dom？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11853484/