角度模态控制器范围

时间:2016-06-08 15:28:29

标签: javascript angularjs

我对模态的范围有问题。我使用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

这显然看起来不对......

2 个答案:

答案 0 :(得分:0)

$ scope.form不存在,请尝试

ng-modal="formName"

答案 1 :(得分:0)

您似乎只缺少$scope变量。

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

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

    $scope.ok = function() {

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

    };

})