bootstrap modal pop 不适用于 Angular js $scope答案

【问题标题】：bootstrap modal pop not working with angular js $scopebootstrap modal pop 不适用于 Angular js $scope
【发布时间】：2017-03-12 07:32:10
【问题描述】：

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

$scope.user='UserName';
$scope.openList=function(){
   $('#poplist').modal('show')
}
$scope.getUser=function(){
   console.log('username are ' + $scope.user); // here i am getting $scope.user is null
}

HTML 页面

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

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

【问题讨论】：

任何控制台输出？
请包含您的模态html
我也添加了我的 html。请检查

标签： angularjs angularjs-scope bootstrap-modal

【解决方案1】：

尝试使用UI-Bootstarp Modal。

这个库将所有引导组件构建为角度组件。

示例 sn-p

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

【讨论】：

【解决方案2】：

使用 angular $model 服务打开弹出窗口。

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

【讨论】：

【解决方案3】：

问题是当您打开引导模式时，它会创建新范围。所以先引用 $parent 就可以得到模型的值了。

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

【讨论】：

谢谢。但我在使用 $scope.$parent.user 后变得不确定