我的角度范围发生了什么？答案

【问题标题】：what is happening to my angular scope?我的角度范围发生了什么？
【发布时间】：2014-11-10 14:57:04
【问题描述】：

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

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

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

在控制器代码中，如何访问我传入的作用域上的foo 属性？

我的示波器发生了什么？ $modal 创建的范围对象与控制器使用的范围对象相同吗？看来情况并非如此。

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

谢谢

【问题讨论】：

我怀疑您需要传入现有的 AngularJS $scope 作为 scope 选项。

标签： angularjs angularjs-scope angular-strap

【解决方案1】：

将模式打开为函数调用...您可以在其中传递数据并取回数据。这不是接近它的唯一方法，但我认为它是接近它的干净方法。

我通常遵循这种模式，给模态它自己的控制器并传入数据并通过将数据传递给 Promise 来取回数据：

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>

【讨论】：