如何将函数变量传递给 Bootstrap UI 模态？

Question

我需要在单击打开按钮时将一个变量传递给我的模式。我想用 angular bootstrap ui 模式来做。我需要这个，因为我将为每个页面使用一个可重用的模式，并且根据我想要更改模式内容的页面。

为了示例，我将我的变量命名为 'x'。

这是我正在处理的代码：

在第二次警报时，对象为空，如果有人有解决方案，即使使用其他模式'coding style'，我将不胜感激:)

脚本：

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>

Answer 1

您从未将变量 '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');
    };
};

如何将函数变量传递给 Bootstrap UI 模态？

How to pass a function variable to a Boostrap UI modal?

angularjs

angular-ui-bootstrap

bootstrap-modal