как связать область / модель с угловым интерфейсом $ modal.popup ()

Question

как связать область / модель с угловым интерфейсом $ modal.popup ()

0

У меня есть просмотр списка 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>

Salman 03 июль 2015, в 08:45

Источник

Теги:

javascript

angularjs

angularjs-scope

angularjs-ng-repeat

2 ответа

0

да, вы можете связать как это, используя resolve

    var modalInstance = $modal.open({

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

ramamoorthy_villi 03 июль 2015, в 05:28

0

O! Я не упомянул, что мое всплывающее окно использует контроллер, а не отдельный. Тогда я не думаю, что смогу использовать resolve . Кроме того, изменения, сделанные в модальном режиме, должны напрямую отражать исходный список из модели.
Salman 03 июль 2015, в 06:32
0

Вы можете просто использовать параметр разрешения, чтобы передать значение
ramamoorthy_villi 03 июль 2015, в 06:40

Ещё вопросы

O! Я не упомянул, что мое всплывающее окно использует контроллер, а не отдельный. Тогда я не думаю, что смогу использовать resolve . Кроме того, изменения, сделанные в модальном режиме, должны напрямую отражать исходный список из модели.
Вы можете просто использовать параметр разрешения, чтобы передать значение

Simo Endre · Accepted Answer · 2015-07-03T03-42-00.000Z

Я полагаю, у вас есть отдельный шаблон с модальным окном. Внутри этого шаблона вы определяете локальную область, которая будет заполняться путем фильтрации списка значений из контроллера.

Таким образом, модальное содержание должно выглядеть так:

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

Затем внутри контроллера вы ищете продукт, который определен в основном шаблоне, где вы заполняете список и связываете объект с областью действия модального окна. Поэтому вам нужно отфильтровать продукт, который имеет идентификатор, определенный как параметр в шаблоне листинга.

$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)">

Надеюсь, что это понятно, иначе я могу помочь.