角度模态在结果中没有更新$scope

Question

我正在尝试在 Angular 中实现一个模态窗口来提示用户输入，我在以前的应用程序中使用了几乎相同的代码并且它有效，我真的不知道这里发生了什么......

这是打开模态的控制器(在咖啡脚本中(：

.controller('addStreamModal', [
    '$scope', '$modal', '$log', '$http', '$rootScope'
    ($scope, $modal, $log, $http, $rootScope) ->
        $scope.open = ->
            modalInstance = $modal.open(
                templateUrl: "addStream.html"
                controller: 'addStreamModalInstance'
                resolve:
                    public_key: ->
                        "placeholder"
            )
            modalInstance.result.then ((result) ->
                return
            ), ->
                $log.info "Modal dismissed at: " + new Date()
                return
            return
        return
])

现在是模态实例控制器：

.controller('addStreamModalInstance', [
    '$scope', '$modalInstance', '$http', 'public_key'
    ($scope, $modalInstance, $http, public_key) ->
        console.log(public_key)
        $scope.public_key = public_key
        $scope.ok = ->
            console.log($scope.public_key)
            $modalInstance.close $scope
            return
        $scope.cancel = ->
            $modalInstance.dismiss "cancel"
            return
        return
])

和 HTML：

<div class="modal-header">
    <h4>Please enter the private key for verification {{public_key}}</h4>
</div>
<div class="modal-body">
    <div class="form-group">
        <input type="text" class="form-control" id="exampleInputEmail1" ng-model="public_key">
    </div>
</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>

所以我单击一个按钮，模态打开，文本框中带有"占位符"，我也可以看到这个测试绑定到模态标题。 当我在框中结束文本时，由于绑定，标题继续按预期更新，但是当我单击确定时，似乎 $scope.public_key 恢复为"占位符"。 试图找出原因。

Answer 1

当您在addStreamModalInstance控制器中设置值时，您正在与addStreamModal.不同的范围内工作 要使用 addStreamModalInstance 中设置的值更新 addStreamModal 的作用域，您可以返回所选值(通过返回 $scope 来执行此操作(，并在 addStreamModal 控制器的 .then 调用中分配它。

你的addStreamModal会变成这样(对不起，我的咖啡脚本不是很好(：

.controller('addStreamModal', [
    '$scope', '$modal', '$log', '$http', '$rootScope'
    ($scope, $modal, $log, $http, $rootScope) ->
        $scope.modalTitle = "placeholder" //defaults this value to placeholder
        $scope.open = ->
            modalInstance = $modal.open(
                templateUrl: "addStream.html"
                controller: 'addStreamModalInstance'
                resolve:
                    public_key: ->
                        $scope.modalTitle
            )
            modalInstance.result.then ((modalScope) ->
                $scope.modalTitle = modalScope.public_key //updates the default value with the value from the modal
                return
            ), ->
                $log.info "Modal dismissed at: " + new Date()
                return
            return
        return
])

Answer 2

好的，我现在让它工作了，我回到角度示例，对其进行了测试，然后慢慢地使其适应我的需求，这是代码：

.controller "addStreamModal", ($scope, $modal, $http, $log) ->
    $scope.public_key = ""
    $scope.open = ->
        modalInstance = $modal.open(
            templateUrl: "addStream.html"
            controller: "addStreamModalInstance"
            resolve:
                public_key: ->
                    $scope.public_key
        )
        modalInstance.result.then ((public_key) ->
            console.log(public_key)
            return
        ), ->
            $log.info "Modal dismissed at: " + new Date()
            return
        return
    return

而实例：

.controller "addStreamModalInstance", ($scope, $modalInstance, public_key) ->
    $scope.editable = public_key: public_key
    $scope.ok = ->
        $modalInstance.close $scope.editable.public_key
        return
    $scope.cancel = ->
        $modalInstance.dismiss "cancel"
        return
    return

.HTML：

<div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
    <input type="text" name="input" class="form-control" ng-model="editable.public_key">
</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>

所以我认为区别在于我将公钥嵌套到实例控制器中的 .editable 对象中。 我不完全明白为什么这有效，但它确实如此，我对此感到高兴。