Question

编辑 - 创建了Plunker

我试图让自定义指令重用于我的所有输入。每个输入都有不同的选项，具体取决于登录用户（必需，隐藏等），所以我认为这样的事情是完美的。

我基本上让它像这样工作..

{{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);
  }
};
});

所以这一直有效，直到我添加第二个输入并且它与最后一个输入共享选项范围。范围：真的显然在这种情况下不起作用。我需要每个自定义输入以保持自己的选项。或者我可能只是错了。

这篇文章AngularJS - Create a directive that uses 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);
  }
};
});

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

<强>更新

Updated fiddle

您的问题是将各个字段与单个ng模型绑定。现在，plunker会根据您的需求进行更新。该指令如下所示

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;
    }
  };
});

创建一个使用ng-model并具有唯一范围的指令

1 个答案: