javascript - 从一个指令访问另一指令的 ng-model

Question

所以我在第一个指令中有该模板

<tr ng-repeat="node in myprops.List">
        <td>{{node.startDate | date: 'yyyy-MM-dd'}}</td>
        <td>{{node.endDate | date: 'yyyy-MM-dd'}}</td>
        <td>{{node.workInHours }}</td>
        <td><label type="button" style="cursor:pointer" ng-click="setIndex($index)" data-toggle="modal" data-target="#{{myprops.id}}">edit</label></td>
        <td><input type="checkbox" ng-click="onClick()" ng-model="node.selected" ></td>
    </tr>

并且在该指令中我有一个具有函数 setIndex(index) 的 Controller ..所以当我单击按钮时，它会打开该模式

<form name="myForm">
                        <md-datepicker ng-model="sDate" md-placeholder="Enter date"></md-datepicker>
                        <md-datepicker ng-model="eDate" md-placeholder="Enter date"></md-datepicker>
                        <input type="number" ng-model="hours"  required>
                    </form>

并且该模态位于其他指令模板中..所以当我单击按钮并打开模态时，我需要将 $index 数组中的内容添加到模型 ..sDate..eDate 和小时数的 ng-model 上...简而言之，我需要从另一个指令中的另一个 Controller 访问一个指令模板中的 ng 模型

Answer 1

您应该将模型对象从主 Controller 传递到模态指令 Controller ，然后通过模态中的操作修改它后，将该对象返回到先前的 Controller 并从模态分配新数据

例如(ui.bootstrap):

function MainController($scope, $modal) {
  $scope.model = {};

  $scope.onClick = function () {
    var modalInstance = $modal.open({
     // params
     controller: ModalController;
     resolve: {data: function() {return $scope.model}}
    });
    modalInstance.result.then(function (data) {
      $scope.model = data
    })
  }
}

function ModalController($scope, $modalInstance, data) {
  // actions
  $scope.data = data;
  $scope.saveForm = function () {
    $modalInstance.close($scope.data)
  }
}