Проблема с привязкой данных из Модального диалога к другой области веб-приложения

0

Я искал решение проблемы, которая, по моему мнению, должна быть относительно легко решить - использование двунаправленной привязки данных Angular.js

У меня модальный диалог (с использованием кода углового ui-bootstrap для модального диалога), из которого я хочу взять введенный текст и выводить на главную страницу приложения, у меня есть рабочий Plunker (он работает с привязкой данных, как я могу см. входное значение в модальном диалоговом окне), однако я хочу принять это значение и привязать его к разделу "Проекты"

мой html

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <h3 class="modal-title">Add Project</h3>
            </div>
            <div class="modal-body">
                Project Name: <input type="text" ng-model="name"></input>
            {{name}}
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>

        In Modal: {{ name }}
        </script>

        <button class="btn btn-default" ng-click="open()">Add Project</button>
    </div>

<div class="col-lg-6">
                    <div class="table-responsive" ng-model="name">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Project</th>
                                    <th>Badges</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{$scope.name}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
        </div> 
  </body>
</html>

мой javascript

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

$scope.name = "";

    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
                projName: function () {
                    return $scope.name;
                }
            }
        });

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

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, projName) {

    $scope.name = projName;

    $scope.ok = function () {
        $modalInstance.close($scope.name);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

Спасибо заранее

  • 0
    Что вы подразумеваете под Проектами ?
  • 0
    Во-первых, есть разница в коде от plunker и в том, что вы опубликовали здесь, и если вы предупредите $scope.name перед $scope.name как назначить ему projName в ModalInstanceCtrl то какой результат вы получите ?? Я думаю, что если вы прокомментируете $scope.name = projName; тогда это будет работать.
Показать ещё 4 комментария
Теги:
modal-dialog

1 ответ

1

Поскольку основная страница приложения управляется контроллером ModalDemoCtrl, а модель управляется контроллером ModalInstanceCtrl, поэтому они не могут использовать переменную области видимости друг для друга, эти контроллеры не имеют отношения.

Единственный способ передать данные переменной области ModalDemoCtrl в ModalInstanceCtrl, используя метод разрешения службы $ model, как и вы.

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

и ModalInstanceCtrl для ModalDemoCtrl с использованием $ modalInstance.close(modeldata), который вы сделали.

поэтому, если вы хотите передать модальный вход в основное приложение. используйте его, как показано ниже...

В ModalInstanceCtrl

$scope.ok = function () {
    $modalInstance.close($scope.name);
  };

В ModalDemoCtrl

modalInstance.result.then(function (nameFromModal) {
      $scope.name = nameFromModal;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
Поделиться
  • 0
    Привет, большое спасибо за помощь, к сожалению, я до сих пор не добился успеха :( plnkr.co/edit/2RmthZ2bENaIUnAP2gOk?p=preview <Обновленный плункер

Ещё вопросы

Сообщество Overcoder
Наверх
Меню