Question

我正在使用angularstrap modal服务在需要登录时在任何页面上打开登录模式。我打开一个这样的：

var scope = {'foo': 'bar'};
var myOtherModal = $modal({scope: scope, template: 'modal/login.html', show: false});

login.html包含模态标记，但它也有一个绑定到它的控制器：

<div ng-controller="SignInController" class="modal"  tabindex="-1" role="dialog">
    <input ng-modal="foo"/>

在控制器代码中，如何访问我传入范围的foo道具？

我的范围发生了什么变化？ $ modal创建的范围对象是控制器使用的范围对象吗？看来事实并非如此。

解决此问题的最佳方法是什么？（能够从任何地方打开登录对话框并从控制器控制其范围）

由于

Answer 1

考虑将模态打开为函数调用...将数据传入并获取数据。这不是接近它的唯一方法，但我认为这是一种 clean 方法。

我通常遵循这种模式，给模态它自己的控制器＆amp;在＆amp;中传递数据通过将数据传递给承诺来获取数据：

var ModalController = function($scope, $modalInstance, input) {
    $scope.input = input;
    var output = {
       username: "",
       password: ""
    };  

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

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

$scope.openModal = function(data) {
    var modalInstance = $modal.open({
        templateUrl: 'popupDialog.tpl.html',
        controller: ['$scope', '$modalInstance', 'input', ModalController],
        resolve: {
            input: function() {
                return data;
            }
        }
    });

    modalInstance.result.then(function(output) {
        // TODO: do something with the output.username & output.password... 
        // call Login Service, etc.
    });
};

编辑：添加弹出式HTML ...

<form class="form-horizontal">
    <div class="modal-header">
        <h3>Please Log In</h3>
    </div>

    <div class="modal-body">
        <form name="form" class="form-horizontal">
            <div class="row">
                <label class="col-sm-3 text-info control-label" for="inputUsername">Username</label>
                <input class="col-sm-8 form-control input-sm" type="text" id="inputUsername" name="inputUsername" ng-model="output.username" />
            </div>
            <div class="row">
                <label class="col-sm-3 text-info control-label" for="inputPassword">Password</label>
                <input class="col-sm-8 form-control input-sm" type="text" id="inputPassword" name="inputPassword" ng-model="output.password" />
            </div>
        </form>
    </div>

    <div class="modal-footer">
        <button class="btn btn-sm btn-primary" type="submit" ng-click="ok()">Ok</button>
        <button class="btn btn-sm btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</form>

我的角度范围发生了什么变化？

1 个答案: