Angular UI模式的范圍問題

Question

我無法理解/使用角度UI模式的范圍。

雖然這里沒有立即顯示，但我已經正確設置了模塊和所有設置（據我所知），但這些代碼示例特別是我發現錯誤的地方。

index.html（它的重要部分）

<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（再次，重要部分）

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（完整版）

<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的雙重約束？ 為什么this有自定義值，但$scope不？

我試圖將ng-controller="AppCreateCtrl"到create.html中的body div，但是這引發了一個錯誤：“Unknown provider：$ modalInstanceProvider < - $ modalInstance”所以沒有運氣。

此時，我唯一的選擇是使用this.name和this.groupType傳回一個對象而不是使用$scope ，但這感覺不對。

Answer 1

當涉及嵌套作用域時，不要將<input>直接綁定到作用域的成員：

<input ng-model="name" /> <!-- NO -->

將它們綁定到至少更深的水平：

<input ng-model="form.name" /> <!-- YES -->

原因是范圍原型繼承其父范圍。 因此，在設置第一級成員時，這些成員直接設置在子范圍上，而不會影響父級。 與此相反，當綁定到嵌套字段（ form.name ）時，會從父作用域中讀取成員form ，因此訪問name屬性將訪問正確的目標。

請在此處閱讀更詳細的說明。

Answer 2

我讓我這樣工作：

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

沒有表格名稱，沒有$parent 。 我正在使用AngularUI Bootstrap版本0.12.1。

我通風報信該解決方案通過此 。

Answer 3

2014年11月更新 ：

實際上你的代碼應該在升級到ui-bootstrap 0.12.0后工作。 Transcluded范圍與控制器的范圍合並，因此不再需要$parent或form. 東西。

在0.12.0之前 ：

模態使用transclusion來插入其內容。 感謝ngForm您可以按name屬性控制范圍。 因此，為了逃避轉換范圍，只需以這種方式修改表單：

<form name="$parent">

要么

<form name="$parent.myFormData">

模型數據將在控制器范圍內提供。

Answer 4

$scope.open = function () {

          var modalInstance = $uibModal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'myModalContent.html',
              controller: 'salespersonReportController',
              //size: size
              scope: $scope
            });

      };

它適用於我的范圍：$ scope謝謝你Jason Swett

Answer 5

我添加范圍：$ scope然后它工作.Cool