Как передать переменную функции в модальное окно Boostrap UI?

Мне нужно передать переменную моему модальному окну при нажатии на кнопку открытия. Я бы хотел сделать это с помощью модального интерфейса angular bootstrap. Мне это нужно, потому что я буду использовать многоразовый модальный для каждой страницы, и в зависимости от страницы я хочу изменить содержимое модального окна.

Я назвал свою переменную «x» для примера.

Вот код, над которым я работаю:

Во втором предупреждении объект равен нулю, если у кого-то есть решение, даже с другим модальным «стилем кодирования», я был бы благодарен :)

Сценарий:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

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

var ModalInstanceCtrl = function ($scope, $modalInstance, x) {
    alert(x);
    $scope.ok = function () {
        $modalInstance.close();
    };

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

HTML:

<!doctype html>
<html ng-app="plunker">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>

    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>Title</h3>
        </div>
        <div class="modal-body">
            {{ x }}
        </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>
        </script>

        <button class="btn" ng-click="open('x')">Open</button>
    </div>
</body>
</html>

angularjs bootstrap-modal angular-ui-bootstrap
person tetsi    schedule 21.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы никогда не сохраняли переменную 'x' в $ scope. Я исправил ваш пример - см. Здесь, на plunker

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

   $scope.open = function (x) {
     var modalInstance = $modal.open({
         templateUrl: 'myModalContent.html',
         controller: ModalInstanceCtrl,
         resolve: {
             x: function () {
                 return x; // <-- just use the function parameter
             }
         }
     });
   };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, x) {
    $scope.x = x; // store x in the scope
    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};
person Michael    schedule 21.04.2015
comment
Вы знаете, почему этой переменной не нужна $ scope? Что ж, большое спасибо за вашу помощь! - person tetsi; 21.04.2015
comment
Что именно вы имеете в виду? Конечно, переменная должна храниться в $ scope, чтобы отображать ее в модальном окне. Но вы должны хранить его там сами, Angular не сделает этого за вас. Но вы можете упростить modalInstance и избежать использования «resolve» и вместо этого использовать наследование области. plnkr.co / edit / 76mMaChGISPcwZTkttOD? p = preview - person Michael; 22.04.2015
comment
А, ладно, я думал, что переменная уже находится в области действия первого контроллера, когда вы передаете ее через функцию! Спасибо за улучшение, может быть проще использовать это вместо решения ... - person tetsi; 23.04.2015