javascript - 带有包含输入 : can it be done cleanly? 的 ng-switch 的 Angular 指令

Question

• 简述

我正在寻找一种更简洁的方法来解决涉及隔离范围的问题。我不确定是否有比我现有的更好的解决方法，但我希望如此，因为我对此不太满意。

• 演示

Demo on Plunkr包含显示问题的指令和另一个带有脏修复的指令。更改输入的值并查看它不会为其中之一传播。

• 故事

我写了一个包含 ng-switch 的指令。代码是:

angular.module('core')
.directive('otherSearchField', function() {
  return {
    templateUrl: 'otherSearchField.html',
    restrict: 'E',
    scope: {
      field: '=',
      placeholder: '@',
      condition: '@searchWhen'
    }
  };
});

它的模板是:

<section ng-switch="condition">
  <div ng-switch-when="true">
    <input type="text" ng-model="field" placeholder="{{placeholder}}">
    <button ng-click="search()">Search</button>
  </div>
  <div ng-switch-default>
    {{field}}
  </div>
</section>

我可以将它重写为 ng-if，但真正重要的是在这两种情况下，一个新的作用域是由 ng-switch 或 ng-if 创建的 .

我这样使用指令:

<div ng-controller="Ctrl">
    <other-search-field field="query.city" placeholder="City" search-when="{{edition.city}}"></other-search-field>
</div>

• 问题

如您所见，在指令模板中，我们有一个绑定(bind)到“字段”的输入。该指令通过指令定义中的 = 符号绑定(bind)到调用模板。但是，因为我们没有使用对象表示法，所以在输入中输入某些内容会修改 ng-switch 作用域中的 字段，但不会传播到它之外。

• (脏)解决方案

我目前的解决方案是在指令的模板中使用对象表示法，这意味着我需要将包含的对象传递给指令，以及我要修改的属性的名称。

<section ng-switch="condition">
  <div ng-switch-when="true">
    <input type="text" ng-model="fieldParent[field]" placeholder="{{placeholder}}">
    <button ng-click="search()">Search</button>
  </div>
  <div ng-switch-default>
    {{fieldParent[field]}}
  </div>
</section>

用法:

<my-search-field field-parent="query" field="customer" placeholder="Customer" search-when="{{edition.customer}}"></my-search-field>

这是可行的:我正在使用对象表示法，因此输入的更改会一直向上传播(请参阅上面链接的 Plunkr)。

• 那么呢？

嗯，虽然只需要其一个属性，但我不太乐意传递整个对象。有没有更好的方法？

• 注意

请注意，在这种情况下，我还可以使用多个 ng-show，因为它们不会创建自己的范围。但我感兴趣的是此处显示的更普遍的问题，而不是这种特定情况。

感谢一路阅读。向你致敬!

Answer 1

在你的otherSearchField.html模板，您可以访问 $parent $scope的字段属性，从而访问您的指令 <other-search-field> 的隔离范围正在使用。

DEMO

<section ng-switch="condition">
  <div ng-switch-when="true">
    <input type="text" ng-model="$parent.field" placeholder="{{placeholder}}">
    <button ng-click="search()">Search</button>
    <div>value in the template, in "switch": {{$parent.field}}</div>
  </div>
  <div ng-switch-default>
    {{field}}
  </div>
</section>
<div>
  value in the template, out of "switch": {{field}}
</div>