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

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 元素中查看我的 cmets：

方法一：

<!-- 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>

方法二：

<!-- 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

希望这一切都清楚！