Question

我有一个ng-repeat列表视图，每个项目都有编辑按钮。我想打开一个模态弹出窗口，并将与该列表项关联的值填充到弹出域中。

我使用$scope.modalInstance = $modal.open({...});

按常规方式加载弹出窗口

我正在努力的是，如何绑定弹出窗口的范围！我知道范围可以在初始化时作为参数传递。但我希望弹出窗口直接将字段与该特定列表项绑定。

我尝试传递列表项，如

var item = $scope.list[index];

$scope.modalInstance = $modal.open({
    ...,
    scope: item
});

但它会给出TypeError: $rootScope.$new is not a function错误。可能这不是我应该绑定列表项的正确方法。请指导正确的方向。

添加触发编辑列表项的完整方法

$scope.editItem = function (index) {
    $scope.item = $scope.api.select[index];

    $scope.modalInstance = $modal.open({
        templateUrl: 'templates/pupup-edit-item.html',
        scope: $scope,
    });

    $scope.modalInstance.result.then(function () {
        // ...
    }, function () {
        // $log.info('Modal dismissed at: ' + new Date());
    });
}

模板，

<div class="modal-header">
        <h3 class="modal-title">Edit Item</h3>
</div>
<div class="modal-body">
    <input ng-model="item.name" />
</div>
<div class="modal-footer">
        <button class="btn btn-primary" ng-click="popup_Ok()">OK</button>
        <button class="btn btn-default" ng-click="popup_Cancel()">Cancel</button>
</div>

Answer 1

我想你有一个单独的模板与模态窗口。在该模板中，您可以定义一个本地范围，该范围将通过过滤控制器中的值列表来填充。

因此模态内容应如下所示：

<div modal="isProductShowing" close="hideFullProduct()" options="productModalOptions">    
    <section class="container modal-body product-modal">    
        <button class="modal-body__close" ng-click="hideFullProduct()">Close</button>    

        <div class="product-modal__content">                
            <h1 class="product-modal__name">{{ currentFullProduct.name }}</h1>                            
        </div>                        
    </section>    
</div>

然后在控制器内搜索在主模板中定义的产品，在该模板中填充列表并将对象与模态窗口的范围相关联。因此，您需要过滤在列表模板中具有id定义为参数的产品。

$scope.isProductShowing = false;

$scope.currentFullProduct = null;

$scope.productModalOptions = {
    backdropFade: true,
    dialogFade:true
};

$scope.showFullProduct = function (productId) {
    $scope.isProductShowing = true;
    $scope.currentFullProduct = _.findWhere($scope.products, { id: productId});
}

只剩下一件事：点击时触发模态窗口。这需要在主列表模板上完成：

<li ng-click="showFullProduct(product.productId)">

希望它清楚，否则我可以提供帮助。

Answer 2

是的，你可以使用resolve

这样绑定

    var modalInstance = $modal.open({

       ......
       .... 
        resolve: {
            item: function() {
                return $scope.item;
            }
        }
    });

如何使用angular ui $ modal.popup（）

2 个答案: