如何使用角度用戶界面$ modal.popup（）綁定范圍/模型

Question

我有一個ng-repeat列表視圖，每個項目都有編輯按鈕。 我想打開一個模式彈出窗口，並將與該列表項關聯的值填充到彈出字段中。

我使用$scope.modalInstance = $modal.open({...});以通常的方式加載彈出窗口$scope.modalInstance = $modal.open({...});

我正在努力的是，如何綁定彈出窗口的范圍！ 我知道范圍可以在初始化時作為參數傳遞。 但是我希望彈出窗口將字段與該特定列表項直接綁定。

我試圖像這樣傳遞列表項

var item = $scope.list[index];

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

但是它給出了TypeError: $rootScope.$new is not a function錯誤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;
            }
        }
    });