【问题标题】：Angular UI Bootstrap Modal Form Scope "undefined"Angular UI Bootstrap 模态表单范围“未定义”
【发布时间】：2015-12-04 13:52:14
【问题描述】：

我有一个带有按钮打开模式“new_project_modal.html”的 uibootstrap 手风琴“angular_accordion.html”，在模式中输入的值显示在 twitter bootstrap 面板中的视图“angular_tabel.html”中，带有一个打开相同模式的按钮“ new_project_modal.html”，我想在输入字段中显示值以便用户可以编辑，但值在控制器“modal_new_project.js”的范围内不可用。

我不明白的另一件事是，在“new_project_modal.html”中，ng-controller="ModalDemoCtrl as modalScope"，我必须使用 ng-model="modalScope.name"，ng-model="name" 不起作用，没有数据绑定，控制器中没有范围，为什么？当它在其他视图中像 ng-model="something" 一样工作而不需要“modalScope”时？

AngularJS：1.4.7
用户界面引导：0.14.3

angular_accordion.html：

<div ng-controller="UibAccordionCtrl">

    ......
    .....

            <div ng-controller="ModalDemoCtrl">

                <a href="#" id="project-popover" class="btn btn-default center-block" ng-click="open()"><i class="fa fa-bar-chart-o pull-left" id="test1"></i>Create Project</a>

            </div>

            ............
            .......
</div>

angular_tabel.html：

<div ng-controller="TabsCtrl as tabsController">

    .........

            <div class="panel panel-default" id="outer-panel" ng-repeat="panel in panels">

    .............
    ............
    .........
                        <div ng-controller="ModalDemoCtrl">
                            <button class="btn btn-default" ng-click="editProject(panel.name)"><i class="fa fa-edit"></i></button>
                        </div>

    ........
    .......

</div>

new_project_modal.html：

<div ng-controller="ModalDemoCtrl as modalScope">

    ...............
    .............

                    <form class="form-horizontal">
                        ...........
                                <input type="text" class="form-control" id="userName" placeholder="Name" ng-model="modalScope.name">
                        .......
                    </form>

    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok(modalScope.name)">Create</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>

</div>

modal_new_project.js：

var app = angular.module('modalNewProjectModule', ['ui.bootstrap']);

app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

    $scope.open = function () {

        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'ModalInstanceCtrl',
            scope: $scope,
            windowClass: 'test-modal-width',
            backdrop: false,
            resolve: {
                projectName: function () {
                    return $scope.name;
                }
            }
        });
    };

    $scope.editProject = function (name) {
        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'EditModalInstanceCtrl',
            scope: $scope,
            windowClass: 'test-modal-width',
            backdrop: false,
            resolve: {
                projectName: function(){
                    return name;
                }
            }
        });
    };
});

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {
    $scope.ok = function(projectName) {

        var new_project_params = {
            'name': projectName,
            'status': 'Status New'
        };

        NewProjectService.setValue(new_project_params);

        $uibModalInstance.close();

    };

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

app.controller('EditModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {

    $scope.name = projectName;              //undefined

    $scope.ok = function(project) {

        var new_project_params = {
            'name': projectName,
            'status': 'Status New'
        };

        NewProjectService.setValue(new_project_params);

        $uibModalInstance.close();

    };

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

【问题讨论】：

标签： javascript angularjs angularjs-scope angular-ui-bootstrap

【解决方案1】：

至于您的代码，它有点难以理解，我认为其中一些可能不存在。函数调用似乎与容纳它们的控制器无关。因此，对于您问题的实际方面，我不会有太大帮助。如果您想创建一个 plunker，我将更新此答案并再次尝试您的代码和具体问题。

至于更多地了解 Controller As 语法（您问题的第二部分），这可能对您有用，因为我认为您可能在几个地方使用了错误的范围版本。

如果你使用这样的标准控制器命名：

<div ng-controller="SampleController">
    <span ng-bind="name"></span>
</div>

那么控制器会这样设置：

app.controller('ModalInstanceCtrl', function ($scope) {
    $scope.name = "namegoeshere";

如果你使用 Controller As 语法，那么看起来就像这样：

<div ng-controller="SampleController as ctrl">
    <span ng-bind="ctrl.name"></span>
</div>

那么控制器会是这样的：

app.controller('ModalInstanceCtrl', function ($scope) {
    var self = this;
    self.name = "namegoeshere";

常见的用例是当您拥有具有不同控制器的嵌套视图并且每个控制器上都有一个“$scope.name”，但它们具有不同的值。哪个属于哪个范围？当我试图绕开它时，我发现这篇博文非常有用。

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

【讨论】：

这个关于访问范围的不同方式的信息对我来说是新的，我会调查它，你展示了 2 个选项，一个没有“As”语法，一个有它，我的问题是我这里没有选择，我想在没有“As”的情况下使用它，但它根本不绑定。它在控制器中不可用且 $scope.model 未定义。
如果您可以在 Plunkr 中重现未定义的绑定问题，我可能会找出问题所在。有时，在其中一个工具中创建简化的测试用例会发现丢失的部分，最终你会一路弄清楚。 :)

【解决方案2】：

好吧，主要有两个原因。

1) 对 Angular 控制器定义“Controller As”和（$scope VS this）的变化缺乏了解。（文档仍然没有显示使用他们自己推荐的方法“Controller As”的示例）

2）模态实例控制器和模态html模板的控制器混淆，即模态的控制器只是在$uibModal.open({...})中定义的，在模态的模板中不需要。

new_project_modal.html：（之前）

<div ng-controller="ModalDemoCtrl as modalScope">
..........
.....
<input type="text" class="form-control" ng-model="modalScope.projectname">

new_project_modal.html：（之后）

<div>
..........
.....
<input type="text" class="form-control" ng-model="modalScope.projectname">

modal_new_project.js：（之前）

..........
....
.


    $scope.open = function () {

        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'ModalInstanceCtrl',
            scope: $scope,
            resolve: {
                projectName: function () {
                    return $scope.projectname;
                }
            }
        });
    };

    .....
    ......
    .......

modal_new_project.js：（之后）

..........
..........
.

    var vm = this;

    vm.open = function () {

        var modalInstance = $uibModal.open({
            templateUrl: 'partials/new_project_modal.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: 'modalScope',
            resolve: {
                projectName: function () {
                    return vm.projectname;
                }
            }
        });
    };

    .....
    ......
    .......

【讨论】：