Question

我的应用中有多个“输入字段和按钮”。该按钮打开一个对话框，在文本字段中写入内容。

[ input ] [ button ] ---> [ dialog ( ok ) ( cancel ) ]

我使用过Bootstrap.UI.Modal（https://angular-ui.github.io/bootstrap/#/modal），所以我承诺要处理它：

//html
<input ng-model="foo"/>
<button ng-click="dialog('foo')"> Open </button>

//controller
modalInstance.result.then(
    function ( selectedItem ) {
        $scope[ arg ] = selectedItem;
    }, 
    ...
);

一切正常。（Demo）当我必须访问我的范围对象的嵌套属性时，问题出现了：

...
<input ng-model="foo"/>
<button ng-click="dialog('foo')"> Open </button>
...
<li ng-repeat="thing in model.nested.properties.of.unknown.level">
    ...
    <input ng-model="thing.foo"/>
    <button ng-click="dialog( '???' )"> Open </button>
    ...

我想知道的是：实现这一目标的最佳方法是什么？

到现在为止我试过了：

将范围变量传递给返回的回调，但它只获得了值，而不是引用;所以该字段不会更新。
```
 resolve: {
     field: function() {
       return $scope[ field ];
     }
 }
```

传递字符串数组以重新创建范围层次结构

 dialog( ["a","b","c"] ) --> $scope[ "a" ][ "b" ][ "c" ] = output.value;

准备一个回调对象，如

 object = { 
   "one": function(){ $scope.a.b.c = ... }, 
   "two": function(){ $scope.d.e.f = ... }, 
   ... 
   // but this requires that I know in advance 
   // how many level I will nest into the $scope
 }

使用输入字段的id，所以你可以直接写入DOM（但据我所知，这在angularjs中不是一个好方法）
```
 $("#input-abc...").val( ... )
```
使用eval（uungh ...）

我认为第一个解决方案是最好的解决方案，但是如何将嵌套范围元素的引用传递给我的promise回调？有一些最佳实践来实现这一目标吗？有什么建议吗？

Answer 1

要处理嵌套结构，您可以简单地将容器与字段名称一起传递：

resolve: {
    container: function () { 
      return thing; // thing would come from edit() parameter
    },
    field: function () {
      return fieldName;
    }
  }

然后从容器而不是范围访问您的数据。这将是穷人双向绑定。

-

另一种方法，就是你离开指令的地方，如下：

步骤1）当您使用ngModel时，将其添加到指令范围以获得双向绑定：

scope: {
  ngModel: '='
},

步骤2）将attr参数添加到链接

link: function (scope, element, attr)

步骤3）使字段解析为视图中传递的数据

resolve: {
  field: function () {
    return attr.external;
  }

步骤4）一旦模态完成，将新数据分配给ngModel

scope.ngModel = output.selection;

步骤5）改变你的观点：

<input type='text' ng-model='thing.value' external="{{thing.label}}"/> Value: {{thing.value}}

小提琴：http://plnkr.co/edit/hj6gOITk0rkHwPqSN9Tf?p=preview

Answer 2

如果可能的话，我建议您考虑具有相同结构的所有数据，这样您就不必处理模态中的条件。

即使是第一个和第二个：

 $scope.first = {label:'first',value:'initial value'};
 $scope.second = {label:'second ', value:'initial value'};

请参阅plunker

Answer 3

我找到了让它发挥作用的方法：

我创建了一个指令，用于直接在元素的val（）上设置从promise中获得的值。

.directive("external", function( $modal ){

 return {

    restrict: "A",

    link: function (scope, element) {

      element.bind("mousedown", function () {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
            field: function() {
              return "";
            }
          }
        });

        modalInstance.result.then(function( output ) {
          element.val( output.selection );
        }, function() {
          $log.info('Modal dismissed at: ' + new Date());
        });
      });
    }
  };
});

这样您就可以在事先不知道任何事情的情况下访问您的元素。

工作演示（link）

Angular写入嵌套的范围属性

3 个答案: