我是一名 Java 开发人员，正在从事一个业余项目。我决定使用 AngularJS 来使用我的 RESTful Web 服务。
我的JSON结构如下:
[
{
"generatorName": "name1",
"constructorParams": [
{
"type": "Boolean",
"value": "true",
},
{
"type": "Integer",
"value": "2",
}
]
},
{
"generatorName": "name2",
"constructorParams": [
{
"type": "Integer",
"value": "10",
},
{
"type": "Integer",
"value": "10",
}
]
}
]
我的目标是根据构造函数参数的“类型”显示特定的(例如数字、文本等)输入字段，并用“值”初始化它。因此，如果选择第一个生成器，我希望有这样的东西:
<html>
<select>
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
<input type="number" value="2">
<html>
我已经阅读了一些帖子，并决定在我的循环中使用自定义指令:
<p ng-repeat="param in selectedGenerator.constructorParams">
<constructor-param param="{{param}}"></constructor-param>
</p>
这是我的自定义指令:
app.directive("constructorParam", function() {
return {
scope : {
param : '@'
},
templateUrl : '/html_templates/constructor_param_template.html'
};
});
这是模板:
<div ng-switch="{{param.type}}">
<div ng-switch-when="Integer">
<input type="number" ng-attr-name="{{param.type}}" min="0" ng-attr-value="{{param.value}}">
</div>
<div ng-switch-when="Boolean">
<select ng-if="{{param.value}}" ng-attr-name="{{param.type}}">
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
<select ng-if="!{{param.value}}" ng-attr-name="{{param.type}}">
<option value="true">Yes</option>
<option selected="selected" value="false">No</option>
</select>
</div>
<div ng-switch-when="String">
<input type="text" ng-attr-name="{{param.type}}" ng-attr-value="{{param.value}}">
</div>
<div ng-switch-when="Double">
<input type="number" ng-attr-name="{{param.type}}" step="0.01" min="0" ng-attr-value="{{param.value}}">
</div>
</div>
这些不起作用。我可以在 Chrome 开发人员工具中看到该指令已运行，但它没有提供任何可见的输出。我的问题是:
1) 我是否在自定义指令元素中正确传递了参数对象？
2) 我不确定 scope该指令的 - 我也尝试过 param : '=param' - 它也不起作用...
3)我应该如何读取模板中传递的对象的属性？我试过:value="{{param.type}}" , value={{param.type}}和ng-attr-value="{{param.value}}" 。没有一个有效，但可能有完全不同的原因......
4) 我可以对所有此类元素的 HTML 属性使用前缀“ng-attr-”作为名称和值吗？
5) 我的模板代码正是我粘贴的内容 - 我是否需要将其设为具有头部、主体等的有效 HTML 结构？我必须附上<script>使用 AngularJS？我已经这样做了，但再一次没有改变。
6) 整个故事的使用场景是从下拉列表中选择一个具体的生成器，并以指定的方式显示它的构造函数参数。因此它必须通过生成器的更改重新生成 HTML。我假设它是在 ng-repeat 循环中完成的，但请确认这一点。
非常非常感谢您的投入! :)
最佳答案
当你这样做时param : '@'这就是“文本绑定(bind)”。如果您想告诉 Angular 不要将绑定(bind)到属性的内容解释为作用域上的属性，而是直接解释为字符串，这很有用。
如果你愿意的话
<my-custom-directive param="hello"></my-custom-directive>
然后在你的指令中，param将等于字符串 "hello" 。而如果你绑定(bind)到 param使用双向绑定(bind)param : '=' ，那么 Angular 就会寻找 hello作用域上的属性，而不是将其视为字符串文字。
就你而言，当你这样做时 param="{{param}}" Angular 首先通过查看范围将“param”解包为字符串文字，然后创建绑定(bind)。因此，即使这可能有效，如果 param是一个字符串，在你的例子中它是一个对象，所以我认为它不会发挥得很好。因此，我将直接绑定(bind)到它(请参阅下面的最终代码)。
在您的指令模板中，您还使用了一些需要范围绑定(bind)的 Angular 指令，因此我会尝试在没有大括号的情况下进行绑定(bind)。请参阅下面的示例代码。
app.directive("constructorParam", function() {
return {
scope: {
param: '='
},
templateUrl: '/html_templates/constructor_param_template.html'
};
});<!-- container -->
<p ng-repeat="param in selectedGenerator.constructorParams">
<constructor-param param="{{param}}"></constructor-param>
</p>
<!-- TEMPLATE -->
<div ng-switch="param.type">
<div ng-switch-when="Integer">
<input type="number" ng-attr-name="param.type" min="0" ng-attr-value="param.value">
</div>
<div ng-switch-when="Boolean">
<select ng-if="param.value" ng-attr-name="param.type">
<option selected="selected" value="true">Yes</option>
<option value="false">No</option>
</select>
<select ng-if="!param.value" ng-attr-name="param.type">
<option value="true">Yes</option>
<option selected="selected" value="false">No</option>
</select>
</div>
<div ng-switch-when="String">
<input type="text" ng-attr-name="param.type" ng-attr-value="param.value">
</div>
<div ng-switch-when="Double">
<input type="number" ng-attr-name="param.type" step="0.01" min="0" ng-attr-value="param.value">
</div>
</div>如果仍然不起作用，请告诉我，以便我可以在 CodePen 中尝试。
关于AngularJS:具有多个模板的动态自定义指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42328023/