Fatal编程技术网
  • angularjs/
  • AngularJS：具有多个模板的动态自定义指令

AngularJS：具有多个模板的动态自定义指令

angularjs dynamic

AngularJS：具有多个模板的动态自定义指令,angularjs,dynamic,angularjs-directive,angularjs-templates,Angularjs,Dynamic,Angularjs Directive,Angularjs Templates,我是一名Java开发人员，从事一个辅助项目。我决定使用AngularJS来使用我的RESTful Web服务 我的JSON结构如下所示： [ { "generatorName": "name1", "constructorParams": [ { "type": "Boolean", "value": "true", }, { "type": "Integer", "value

我是一名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>

<!-- 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" name={{param.type}} min="0" value={{param.value}}>
    </div>

    <div ng-switch-when="Boolean">
        <select ng-if="param.value" name={{param.type}}>
            <option selected="selected" value="true">Yes</option>
            <option value="false">No</option>
        </select>

        <select ng-if="!param.value" 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" name={{param.type}} value={{param.value}}>
    </div>

    <div ng-switch-when="Double">
        <input type="number" name={{param.type}} step="0.01" min="0" value={{param.value}}>
    </div>
</div>


对
不
对
不
这些不起作用。我可以在Chrome开发者的工具中看到该指令正在运行，但它没有提供任何可见的输出。我的问题是：

1） 我是否在自定义指令元素中正确传递param对象

2） 我不确定指令的
范围
-我也尝试过
param:'=param'
-它也不起作用

3） 如何读取模板中传递的对象的属性？我试过：
value=“{{param.type}}”
，
value={{param.type}}
和
ng attr value=“{{param.value}}”
。没有一个是有效的，但可能有完全不同的原因

4） 我可以为所有这些元素的HTML属性（如名称和值）使用前缀“ng attr-”吗

5） 我的模板的代码正是我粘贴的-我需要使它成为一个有效的HTML结构，包括头部、主体等吗。？我必须用AngularJS附加
？我已经做到了，但再一次，没有改变

6） 整个故事的使用场景是从下拉列表中选择一个具体的生成器，并以指定的方式显示它的构造函数参数。因此，它必须通过生成器的更改来重新生成HTML。我假设它是在ng重复循环中完成的，但请确认

非常非常感谢您的投入！：）

1）否，将值传递给指令时需要删除花括号

2,3）在指令中使用
=
而不是
@
。因为
@
获取参数的字符串值，
=
获取参数值

scope: {
    param: '='
},
4） 如果需要绑定数据，请使用
ng model
而不是
ng attr

5） 您不需要在
constructor\u param\u template.html
template中添加html或body标记

6） 重复这样做。一旦数组得到更新，它将动态更新DOM

当您执行
参数：'@'
时，这是一个“文本绑定”。如果您希望告诉Angular不要将绑定到属性的内容解释为作用域上的属性，而是直接解释为字符串，那么这非常有用

如果你愿意的话

然后在指令中，
param
将等于字符串
“hello”
。如果使用双向绑定
param:'='
绑定到
param
，Angular将查找作用域上的
hello
属性，而不是将其作为字符串文本

在您的例子中，如果执行
param=“{{param}}”
Angular首先通过查看作用域将“param”解包为字符串文字，然后创建绑定。因此，即使如果
param
是一个字符串，这可能会起作用，但在您的例子中，它是一个对象，因此我认为它不会发挥作用。因此，我将直接绑定到它（请参阅下面的最终代码）

在您的指令模板中，您还使用了一些角度指令，它们期望范围绑定，因此我将尝试在没有花括号的情况下绑定。请参见下面的示例代码

app.directive（“constructorParam”，function（）{
返回{
范围：{
参数：'='
},
templateUrl:“/html\u templates/constructor\u param\u template.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>



<!-- 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" name={{param.type}} min="0" value={{param.value}}>
    </div>

    <div ng-switch-when="Boolean">
        <select ng-if="param.value" name={{param.type}}>
            <option selected="selected" value="true">Yes</option>
            <option value="false">No</option>
        </select>

        <select ng-if="!param.value" 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" name={{param.type}} value={{param.value}}>
    </div>

    <div ng-switch-when="Double">
        <input type="number" name={{param.type}} step="0.01" min="0" value={{param.value}}>
    </div>
</div>


再次感谢你，没有你的帮助，我不会这么快解决这个问题