与角UI模式的适用范围问题 [英] Scope issues with Angular UI modal

问题描述

我无法理解/使用的作用域的角度UI模式。

I'm having trouble understanding/using the scopes for an angular UI modal.

虽然不会立即显现在这里，我有模块，一切都设置正确（据我可以告诉），但特别是这些code样品，其中我发现的bug。

While not immediately apparent here, I have the modules and everything set up correctly (as far as I can tell), but these code samples in particular are where I'm finding the bug.

index.html的（它的重要组成部分）

index.html (the important part of it)

<div class="btn-group">
    <button class="btn dropdown-toggle btn-mini" data-toggle="dropdown">
        Actions
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right text-left">
        <li><a ng-click="addSimpleGroup()">Add Simple</a></li>
        <li><a ng-click="open()">Add Custom</a></li>
        <li class="divider"></li>
        <li><a ng-click="doBulkDelete()">Remove Selected</a></li>
    </ul>
</div>

Controller.js（再次，重要的部分）

Controller.js (again, the important part)

MyApp.controller('AppListCtrl', function($scope, $modal){
    $scope.name = 'New Name';
    $scope.groupType = 'New Type';

    $scope.open = function(){
        var modalInstance = $modal.open({
            templateUrl: 'partials/create.html',
            controller: 'AppCreateCtrl'
        });
        modalInstance.result.then(function(response){

            // outputs an object {name: 'Custom Name', groupType: 'Custom Type'}
            // despite the user entering customized values
            console.log('response', response);

            // outputs "New Name", which is fine, makes sense to me.                
            console.log('name', $scope.name);

        });
    };
});

MyApp.controller('AppCreateCtrl', function($scope, $modalInstance){
    $scope.name = 'Custom Name';
    $scope.groupType = 'Custom Type';

    $scope.ok = function(){

        // outputs 'Custom Name' despite user entering "TEST 1"
        console.log('create name', $scope.name);

        // outputs 'Custom Type' despite user entering "TEST 2"
        console.log('create type', $scope.groupType);

        // outputs the $scope for AppCreateCtrl but name and groupType
        // still show as "Custom Name" and "Custom Type"
        // $scope.$id is "007"
        console.log('scope', $scope);

        // outputs what looks like the scope, but in this object the
        // values for name and groupType are "TEST 1" and "TEST 2" as expected.
        // this.$id is set to "009" so this != $scope
        console.log('this', this);

        // based on what modalInstance.result.then() is saying,
        // the values that are in this object are the original $scope ones
        // not the ones the user has just entered in the UI. no data binding?
        $modalInstance.close({
            name: $scope.name,
            groupType: $scope.groupType
        });
    };
});

create.html上（其全文）

create.html (in its entirety)

<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">x</button>
    <h3 id="myModalLabel">Add Template Group</h3>
</div>
<div class="modal-body">
    <form>
        <fieldset>
            <label for="name">Group Name:</label>
            <input type="text" name="name" ng-model="name" />           
            <label for="groupType">Group Type:</label>
            <input type="text" name="groupType" ng-model="groupType" />
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <button class="btn" ng-click="cancel()">Cancel</button>
    <button class="btn btn-primary" ng-click="ok()">Add</button>
</div>

所以，我的问题表示：为什么不是双重绑定到UI范围有多大？为什么呢这个有自定义值，但 $范围不？

我试图 NG-控制器=AppCreateCtrl添加到create.html上身体的div，但扔了一个错误：未知提供商：$ modalInstanceProvider＆LT ; - $ modalInstance，所以没有运气

I have tried to add ng-controller="AppCreateCtrl" to the body div in create.html, but that threw an error: "Unknown provider: $modalInstanceProvider <- $modalInstance" so no luck there.

在这一点上，我唯一的选择就是回传一个对象 this.name 和 this.groupType 而不是使用 $范围，但感觉错了。

At this point, my only option is to pass back an object with this.name and this.groupType instead of using $scope, but that feels wrong.

在此先感谢！ ：）

更新：
除了由尼科斯建议阅读，也有缺陷，可以帮助此列表。这个问题是陷阱＃5的示例

UPDATE: In addition to the reading suggested by Nikos, there is also this list of pitfalls that can help. This problem is an example of pitfall #5.

推荐答案

我有我喜欢这个工作：

var modalInstance = $modal.open({
  templateUrl: 'partials/create.html',
  controller: 'AppCreateCtrl',
  scope: $scope // <-- I added this
});

没有形式的名字，没有 $父。我使用AngularUI引导版本0.12.1。

No form name, no $parent. I'm using AngularUI Bootstrap version 0.12.1.

我被这个。

这篇关于与角UI模式的适用范围问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！