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>

问题

正如您所注意到的，在指令模板中，我们有一个绑定到“field”的输入。那个通过指令定义中的=表示法绑定到调用模板。但是，因为我们没有使用对象表示法，所以在输入中输入内容会修改ng-switch范围内的field，但不会传播出来。

A（脏）解决方案

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

<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）。

那么？

嗯，当我只需要其中一个属性时，我不太乐意传递整个对象。还有更好的方法吗？

的 NB

注意在这种情况下，我也可以使用多个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>

含有输入的ng-switch的Angular指令：可以干净地完成吗？

1 个答案: