创建使用ng-model并具有唯一作用域的指令

Question

编辑-创建了一个柱塞

我正在尝试制作一个自定义指令，以将其重复用于所有输入。 每个输入都会有不同的选项，具体取决于登录的用户（必需，隐藏等），因此我认为类似的方法会很完美。

我基本上是这样工作的..

{{username}}
 <custom-input name="username" ng-model="username"></custom-input>


app.directive('customInput', function ($compile) {
  return {
    restrict: 'E',
    templateUrl: '/app/shared/views/custom-input.html',
    replace: true,
    link: function ($scope, element, $attr) {
      var options = getFieldOptions($attr.name);
      $scope.options = options;
      var model = element.attr('ng-model');

      return $compile($('input', element).attr('ng-model', model))($scope);
  }
};
});

因此，在我添加第二个输入并且共享上一个输入的选项范围之前，此方法一直有效。 范围：true在这种情况下显然行不通。 我需要每个自定义输入来保留其自己的选项。 也许我只是想解决所有这些错误。

这篇文章AngularJS-创建使用ng-model的指令对我有很大的帮助，但是我不知道最后一个范围问题。

Answer 1

您需要为选项设置一个隔离范围，因此您的指令应如下所示：

app.directive('customInput', function ($compile) {
  return {
    restrict: 'E',
    templateUrl: '/app/shared/views/custom-input.html',
    replace: true,
    scope:{
      name:'='
    },
    link: function (scope, element, $attr) {
      var options = getFieldOptions(scope.name);
      scope.options = options;
      var model = element.attr('ng-model');

      return $compile($('input', element).attr('ng-model', model))(scope);
  }
};
});

现在，您的自定义输入将具有自己的范围

更新

更新的小提琴

您的问题是将各个字段与各个ng模型绑定在一起。 现在，随心所欲的人会更新您想要的东西。 指令显示在我使用的下方

app.directive('customInput', function ($compile) {
  return {
    restrict: 'E',
    template: '<div>{{options.Id}}<input ng-model="name"/></div>',
    replace: true,
    scope: {
     name:'=',
    },
    link: function ($scope, element, $attr) {
    var options = getFieldOptions($attr.name);
      $scope.options = options;
    }
  };
});