Question

我要做的是在模式中有一个自定义指令，它只返回一个文件列表。我遇到的问题是范围似乎有所不同，这取决于我如何在我的模态上声明我的控制器。在我的模态中，我有一个带有隔离范围的自定义指令，它只返回所选文件的列表。我的第一种方法是将其声明为模态创建中的参数。

$scope.openModal = function(){
  uploadDialog = $modal.open({
  templateUrl: 'modal.html',
  size: 'lg',
  controller:'modalController'
});

我尝试的第二种方法是在模态模板的div顶部声明它，所以我必须创建一个新的div并包装整个模态模板。

第二种方法返回一切正常，但第一种方法根本不返回它。调试时我注意到“this”属性的值为selectedFiles。为什么这两种方法产生不同的结果？

方法1 Plunker：http://plnkr.co/edit/6FTQq7fT49lETR5TEzaF?p=preview

方法2 Plunker：http://plnkr.co/edit/QWnbH8GZArMgYqgcQ8L9?p=preview

Answer 1

要回答您的问题，请在下面编译模式模板后首先在DOM元素中查看我的评论：

方法1：

<!-- Method 1 controller's scope is here, it is the same as modal's scope -->
<div class="modal fade in ng-isolate-scope">
  <div class="modal-dialog modal-lg">

    <!-- This ng-transclude create a new scope for each its children elements -->
    <div class="modal-content" ng-transclude>
      <div class="modal-header ng-scope">
        <h3 class="modal-title">Test</h3>
      </div>

      <!-- The selectedFiles will be stored in this scope, not the controller scope above. -->
      <div class="modal-body ng-scope">
        <upload-dir files="selectedFiles" class="ng-isolate-scope">
        <div>{{selectedFiles}}</div>
        <button ng-click="clickHere(selectedFiles)">click here</button>
        <div>From $scope: <input type="text" ng-model="test"></div>
        <div>From parameter: <input type="text" ng-model="testParam"></div>
      </div>
      <div class="modal-footer ng-scope"></div>
    </div>
  </div>
</div>

方法2：

<!-- The modal's scope is here -->
<div class="modal fade in ng-isolate-scope">
  <div class="modal-dialog modal-lg">

    <!-- This ng-transclude create a new scope for each its children elements -->
    <div class="modal-content" ng-transclude>

      <!-- Method 2 controller's scope is here -->
      <div ng-controller="modalController" class="ng-scope">
        <div class="modal-header">
          <h3 class="modal-title">Test</h3>
        </div>

        <!-- There is no new scope created here, -->
        <!-- so the selectedFiles will be stored in the controller's scope above -->
        <div class="modal-body">
          <upload-dir files="selectedFiles" class="ng-isolate-scope">
          <div>{{selectedFiles}}</div>
          <button ng-click="clickHere(selectedFiles)">click here</button>
          <div>From $scope: <input type="text" ng-model="test"></div>
          <div>From parameter: <input type="text" ng-model="testParam"></div>
        </div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>
</div>

如您所见，方法1中控制器的范围不是定义selectedFiles的近似范围，而是$scope.selectedFiles和$scope.test未定义的原因。

您可以先将selectedFiles保留在某个对象中，然后再将其放入范围内，以解决此问题，例如： $scope.model.selectedFiles。请参阅下面的plunker作为示例。

方法1 Plunker （已修改）： http://plnkr.co/edit/pP2L1ZJLxXJXgqR3QAIT?p=preview

希望这清楚起来！

在Angular UI / Bootstrap中为模态声明控制器时的范围问题

1 个答案: