Проблемы с областью с угловым пользовательским интерфейсом

Question

У меня возникли проблемы с пониманием/использованием областей для углового пользовательского интерфейса.

Непонятно здесь, у меня есть модули и все настроено правильно (насколько я могу судить), но эти примеры кода, в частности, являются тем, где я нахожу ошибку.

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> 

Итак, мой вопрос: почему область не ограничивается двойным интерфейсом? и почему this имеют настроенные значения, но $scope нет?

Я попытался добавить ng-controller="AppCreateCtrl" в тело div в create.html, но это забросило ошибку: «Неизвестный поставщик: $ modalInstanceProvider < - $ modalInstance« так не повезло.

На данный момент, мой единственный вариант - передать объект с this.name и this.groupType вместо $scope, но это кажется неправильным.

Answer 1

я получил мое, чтобы работать так:

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

Нет имени формы, ни $parent. Я использую версию AngularUI Bootstrap версии 0.12.1.

Я был перенаправлен на это решение this.

Answer 2

Когда вложенными прицелы участвуют, не связываются с <input> s непосредственно членам сферы:

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

Bind их, по крайней мере, на уровне более глубоком:

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

Причина заключается в том, что прицелы прототипно наследует их родительскую область. Поэтому, когда вы устанавливаете членов 1-го уровня, они устанавливаются непосредственно на дочернюю область, не затрагивая родителя. В отличие от этого, когда привязка к вложенным полям (form.name), член form считывается из родительской области, поэтому доступ к свойству name обращается к правильной цели.

Прочитать более подробное описание here.

Answer 3

Обновление ноября 2014:

На самом деле ваш код должен работать после обновления до УИ-самозагрузки 0.12.0. Transcluded scope объединяется с областью контроллера, поэтому больше не нужно использовать $parent или form..

Перед 0.12.0:

Модальные использует перенаправление для вставки его содержимого. Благодаря 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 
      }); 

     }; 

это работает для меня сфера: $ Сфера поблагодарить у Джейсона Swett

Answer 5

добавить объем: $ сфера, то она работает .Cool