Question

我正在使用app并且我使用了angular.js和bootstrap。我有一个页面，其中我使用了模态弹出窗口。在这个弹出窗口我有项目列表，每个项目都有一个按钮。我的问题是当我点击按钮时我的范围变为空。

<div id="poplist" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">MyList</h4>
            </div>
            <div class="modal-body">
                <div>
                    <table class="paper-table">
                        <tbody>
                            <tr>
                                <th>List Name</th>
                                <th>Total Candidate</th>
                                <th>Action</th>
                            </tr>
                            <tr ng-repeat="p in MyListTable.Rows" class="cp">
                                <td>{{p.ListName}}</td>
                                <td>0</td>
                                <td><input type="button" ng-click="getUser()" class="btn btn-primary" value="Add To List" /></td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Html网页

{{1}}

$ scope.getUser函数调用按钮单击模态弹出窗口。 $ scop.user不在模态弹出窗口中。任何帮助都会很棒。感谢

Answer 1

尝试使用UI-Bootstarp Modal。

此lib将所有引导程序组件构建为角度组件。

示例代码段

$uibModal.open({
      animation: $ctrl.animationsEnabled,
      component: 'modalComponent',
      resolve: {
        items: function () {
          return $ctrl.items;
        }
      }
    });

Answer 2

使用有棱角的$model服务打开弹出窗口。

     $modal.open({
        templateUrl: 'modal.html',
        controller: 'modalController',
        scope: $scope
    });

Answer 3

问题是当你打开bootstrap模式时，它会创建新的范围。因此，通过首先引用$ parent，您将能够获得模型的值。

$scope.getUser=function(){
   console.log('username are ' + $scope.$parent.user); // When opening the modal change to parent
 }

bootstrap modal pop不使用angular js $ scope

3 个答案: