解决了问题！

Question

感谢您的光临。

我有一个模态的以下标记，它与父页面共享相同的角度控制器：

  <!-- START Add Event Video -->
    <script type="text/ng-template" id="EventVideo.html">
        <div class="event-modal">
        <div class="modal-header"><h3>Event Video</h3></div>
        <div class="modal-body">
        <p>Please enter the URL of either a <strong>YouTube</strong> or <strong>Vimeo</strong> video.</p>
        <span ng-if="!Event.VideoUrlIsValid" style='color:#9f9f9f;'>This doesn't look like a valid YouTube or Vimeo Url.  Your video may not work.</span>
        <div class="row" ng-controller="EventCreateController">
             <div pr-form-input span="12" name="videoUrl" ng-model="Event.Item.VideoUrl" placeholder="YouTube or Vimeo URL" isRequired="false" no-asterisk></div>                                          
        </div>
        </div>
        <div class="modal-footer"><button class="btn btn-primary" ng-click="Event.UI.EventVideoModal.Close()">Done</button></div>
        </div>
    </script>
    <!-- END Add Event Video -->

这是相关的JavaScript：

 EventVideoModal: {
                Open: function () {
                    $scope.EventVideoModal = $modal.open({
                        templateUrl: 'EventVideo.html',
                        controller: 'EventCreateController',
                        scope: $scope
                    });
                },
                Close: function () {
                    $scope.EventVideoModal.close();
                }
            }

请注意Event.Item.VideoUrl模型参考。

模态允许用户设置视频的URL，目标是在控制器中设置$scope.Event.Item.VideoUrl，然后关闭模式。父页面和模式共享相同的控制器，所以我希望这可以工作。

模态行为很好（打开和关闭它应该），但$scope.Event.Item.VideoUrl属性没有设置。

感谢任何建议。

解决了问题！

感谢Bogdan Savluk，我意识到我有一个范围继承问题。因此，在模式HTML和JavaScript构造函数中删除对控制器的显式引用，解决了我的问题：

 <!-- START Add Event Video -->
        <script type="text/ng-template" id="EventVideo.html">
            <div class="event-modal">
            <div class="modal-header"><h3>Event Video</h3></div>
            <div class="modal-body">
            <p>Please enter the URL of either a <strong>YouTube</strong> or <strong>Vimeo</strong> video.</p>
            <span ng-if="!Event.VideoUrlIsValid" style='color:#9f9f9f;'>This doesn't look like a valid YouTube or Vimeo Url.  Your video may not work.</span>
            <!-- <div class="row" ng-controller="EventCreateController"> <--REMOVE THIS! -->
<div class="row">
                 <div pr-form-input span="12" name="videoUrl" ng-model="Event.Item.VideoUrl" placeholder="YouTube or Vimeo URL" isRequired="false" no-asterisk></div>                                          
            </div>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" ng-click="Event.UI.EventVideoModal.Close()">Done</button></div>
            </div>
        </script>
        <!-- END Add Event Video -->

这是相关的JavaScript：

 EventVideoModal: {
                Open: function () {
                    $scope.EventVideoModal = $modal.open({
                        templateUrl: 'EventVideo.html',
                        //controller: 'EventCreateController', <--REMOVE THIS!!
                        scope: $scope
                    });
                },
                Close: function () {
                    $scope.EventVideoModal.close();
                }
            }

Answer 1

如果您将scope传递给$modal.open()，则模式的范围将从传递的scope ...创建为子范围 - 因此您可以访问其中的所有属性。

但是如果您将相同的控制器传递给它 - 该控制器将应用于新范围并将覆盖来自父级的所有属性。

所以一般来说，我认为你需要做的唯一事情就是从传递给$modal.open()的配置中删除控制器，或者用只针对那个模态的东西替换它。

使用AngularJS，如何在父页面的控制器中设置$ scope属性

解决了问题！

1 个答案: