角模态控制器范围答案

【问题标题】：Angular modal controller scope角模态控制器范围
【发布时间】：2016-06-08 15:28:28
【问题描述】：

我对模式的范围有疑问。我使用Angular Bootstap library 来显示模态。我的代码是：

angular.module('myApp.workspaces')

.controller('ModalInstanceCtrl', function ModalInstanceCtrl($scope) {

    $scope.ok = function() {

        console.log('in ModalInstanceCtrl and $scope.form is ', $scope.form);

    };

})


.controller('WorkspacesCtrl', function WorkspacesController(workspacesService, $scope, $location, $modal) {

    $scope.uploading = false;
    $scope.noWorkspaces = false;
    $scope.myWorkspaces = [];

    $scope.showModal = function() {

        $scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl: 'assets/workspaces/modalContent.html',
            controller: 'ModalInstanceCtrl',
            resolve: {}, // empty storage
            scope: $scope
        };


        $modal.open($scope.opts);

    };
});

而modalContent.html是：

<div class="modal-header">
  <h1>Workspace Name</h1>
</div>
<div class="modal-body">


    <form>
        <fieldset>
            <label for="name">Workspace Name:</label>
            <input type="text" name="name" ng-model="form.name" />           
        </fieldset>
    </form>

</div>

<div class="modal-footer">

    <div ng-model="test">hjhhhjsad</div>

    <button class="btn btn-primary" ng-click="ok()">OK</button>

    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

当我打开模态然后单击确定时，控制台输出是：

in ModalInstanceCtrl and $scope.form is undefined

我已经尝试了上一个问题here 中提供的所有解决方案。其中：

传递范围：$scope 作为模式的一个选项
将 ng-model="name" 更改为 ng-model="form.name"
将 ng-model="name" 更改为 ng-model="$parent.name"

但是我仍然无法访问 inout 值。我做错了什么？

编辑我意识到我可以使用

访问输入值

$scope.$$childHead.$$childHead.form.name

这显然不正确....

【问题讨论】：

HTML 是否连接到WorkspacesCtrl？
您无法访问 where 的值？没有定义$scope.form，所以在输入框中输入值之前，它不会存在。一旦你输入了一个值，$scope.form.name 变量将在当前控制器中动态创建，管理该 HTML 元素，在本例中为 'ModalInstanceCtrl'
@theblindprophet 不，它没有编辑问题以使其更清晰
@Claies 在我输入一个值并单击后，$scope.form 仍然为空 - 已编辑问题以澄清
$modal 是什么库？我打算创建一个 plunker 来尝试重新创建您的问题，但我不确定您引用的是哪个库；由于这似乎是围绕该特定库的问题，因此我想确保我们使用相同的文件和版本。

标签： javascript angularjs

【解决方案1】：

您似乎只缺少$scope 变量。

.controller('ModalInstanceCtrl', function ModalInstanceCtrl($scope) {

    $scope.form = {
        name: "";
    };

    $scope.ok = function() {

        console.log('in ModalInstanceCtrl and $scope.form is ', $scope.form);

    };

})

【讨论】：

【解决方案2】：

$scope.form 不存在，试试

ng-modal="formName"

【讨论】：

你的意思是 ng-model="formName"？试过了还是不行
是的，把 ng-model="formName" 和 ok 方法，console.log('in ModalInstanceCtrl and $scope.formName is ', $scope.formName);