javascript - 在 Angular 指令中参数化数据模型

Question

我正在实现一个具有三个选项的控件/小部件，只能选择其中一个，这导致我使用单选按钮。这个小部件必须在各种形式上出现多次，因此我着手创建(增量)专用指令。

指令模板如下:

<div class="row">
<span class="fieldlabel col-xs-3">{{title}}</span>
<div>
    <label>
        <input type="radio" data-ng-model="modelName" value="{{value1}}">
        {{label1}}
    </label>
    <label>
        <input type="radio" data-ng-model="modelName" value="{{value2}}">
        {{label2}}
    </label>
    <label>
        <input type="radio" data-ng-model="modelName" value="{{value3}}">
        {{label3}}
    </label>
</div>

通过使用自定义指令或在 Controller 中正确定义/计算标题、标签和值。

我现在面临的最后一个问题是如何为每个这样的小部件指定不同的模型绑定(bind)？这个小部件的所有实例当前共享它们的模型绑定(bind)，这当然不是我需要的。例如，下面虚构示例中的两个 div 都将绑定(bind)到“modelName”，但我需要它们绑定(bind)到 View Controller 中的“annotationsPos”和“menuPos”。

<div my-3option-radiobutton title="Show annotations"></div>
<div my-3option-radiobutton title="Menu position"></div>

如何在自定义指令中指定绑定(bind)？

编辑 1我想要么我没有真正说清楚，要么我缺少一些可以帮助我理解所提供答案的要素。

如果我手写 HTML，我会得到这样的东西:

<div class="row">
<span class="fieldlabel col-xs-3">Position of your annotations</span>
<div>
    <label>
        <input type="radio" data-ng-model="annotationsPos" value="left">
        Left of the element
    </label>
    <label>
        <input type="radio" data-ng-model="annotationsPos" value="middle">
        Through the element
    </label>
    <label>
        <input type="radio" data-ng-model="annotationsPos" value="right">
        Right of the element
    </label>
</div>
<!-- -->
<div class="row">
<span class="fieldlabel col-xs-3">Position of the top menu</span>
<div>
    <label>
        <input type="radio" data-ng-model="menuPos" value="left">
        Top left
    </label>
    <label>
        <input type="radio" data-ng-model="menuPos" value="middle">
        Top middle
    </label>
    <label>
        <input type="radio" data-ng-model="menuPos" value="right">
        Top right
    </label>
</div>
<!-- -->
<div class="row">
<span class="fieldlabel col-xs-3">Position of notifications</span>
<div>
    <label>
        <input type="radio" data-ng-model="notificationPos" value="left">
        Bottom left
    </label>
    <label>
        <input type="radio" data-ng-model="notificationPos" value="middle">
        Bottom middle
    </label>
    <label>
        <input type="radio" data-ng-model="notificationPos" value="right">
        Bottom right
    </label>
</div>

我没有多次复制和粘贴此样板代码，而是希望通过 attribute 指令做到这一点:

<div my-3option-radiobutton title="Position of your annotations"></div>
<div my-3option-radiobutton title="Position of system notifications"></div>
<div my-3option-radiobutton title="Position of the top menu"></div>

这些 block 之间的变化是由标题、值和最重要的模型属性值组成的。我已经以一种不优雅的方式介绍了指令 Controller 中的标题和值(请参阅下面的内容)。我的问题是我似乎无法:

1. 确定在哪里指定 ng-model 和
2. 让“生成的”HTML 代码正确引用该模型属性值(即“annotationPos”、“notificationsPos”和“menuPos”)并且
3. 与父 Controller 双向绑定(bind)

编辑 2这plunk显示@Suresh 的答案有效，对字段名称进行了细微修改。然而，directive that I have written不起作用(页面上的所有小部件都绑定(bind)到相同的值)，可能是因为它是属性指令而不是元素指令。我不想拥有后一种类型，因为它对我来说没有意义，最重要的是，这将被集成到一个现有的更大的项目中，其他开发人员在其中，不使用元素指令。然而，这并不意味着永远不会在项目中使用元素指令。

无论如何，我会继续寻找解决方案。谢谢。

编辑 3我在模板中使用了 ng-repeat 指令，就像@Suresh 所做的那样。使用开发的模板(即手动重复输入标签)不起作用，但我不知道这是否与使用/不使用 ng-repeat 或我在 Controller 中“构建”值和标签的方式有关.

从我的 plunk 中吸取的教训:即使在小部件的 Controller 中对 ngModel(下方)进行了双向绑定(bind):

• 除非使用 ng-repeat，否则页面上的所有控件都将绑定(bind)到相同的值/变量
• 如果模板有data-ng-model="ngModel"，则父 Controller 的绑定(bind)模型不会更新。而不是 data-ng-model="$parent.ngModel"

scope: {
    ngModel: "="
}

Answer 1

'use strict';
var app = angular.module('MyApp',[]);
app.directive("myRadiobutton", function () {
    var templateHtml = function () {
        return '<div class="form-group" >' +
                 '<label style="margin-right: 10px"; ng-repeat="(key, option) in options.valueList">' +
                         '<input type="radio" name="myfield" ng-value="option.value" ng-model="$parent.ngModel" ng-required="options.required" />{{option.title}}' +
                 '</label>' +
             '</div>';
    };

    return {
        scope: { options: '=', ngModel: '=' },
        required: ['ngModel'],
        restrict: 'E',
        template: templateHtml,
    };
});
app.controller('myController', function ($scope) {
    $scope.radioGender =   {
    "label": "Gender",
    "required": true,
    "className": "",
    "valueList": [
      {
        "title": "Male",
        "value": "1"
      },
      {
        "title": "Female",
        "value": "2"
      },
      {
        "title": "Others",
        "value": "3"
      }
    ]

  };
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="myController" >
   <my-radiobutton options="radioGender" ng-model="genderValue"></my-radiobutton>
  <span>{{genderValue}}</span>
</div>