javascript - ng-model 中的 Angular 表达式

Question

我正在尝试使用 Angular 指令创建自定义选择元素。

此指令中的模板包含一个带有我想从自定义元素获取的 ng-model 属性的 select 元素。

<custom-select inner-model="modelName">
    <select model="{{model}}"></select>
</custom-select>

我的问题是 Angular 不允许 Angular 表达式作为 ng-model 属性的值。

我还尝试设置一个属性

link: function(scope, element, attributes) {
    element[0].childNodes[0].setAttribute('data-ng-model', attributes.innerModel);
}

它确实采用了具有正确值的属性，但仍然无法正常工作。

这是我的笨蛋:Plunker

Answer 1

您需要定义一个独立的范围。这实际上会将分配给 inner-model 属性的外部范围属性绑定(bind)到内部范围属性 innerModel，然后您可以在模板中使用它。

app.directive('customSelect', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
       innerModel: "="
    }
    template: '<select ng-model="innerModel" data-ng-transclude></select>',
  };
});

然后你可以这样做:

<custom-select inner-model="someScopeProperty">
  <option value="1">One</option>
  <option value="2">Two</option>
  ...
</custom-select>

(虽然，我仍然对你想要达到的目标感到困惑)