Проблемы с областью применения углового UI modal



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



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



.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>


контроллер.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
});
};
});


создать.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


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

251   5  

5 ответов:

Я получил мой работать так:

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

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

Я был предупрежден об этом решении этой.

когда задействованы вложенные области, не связывайте <input>s непосредственно для членов области:

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

привязать их хотя бы на уровень глубже:

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

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

более подробное описание здесь.

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

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

перед 0.12.0:

модального использует передача, чтобы вставить его содержимое. Спасибо ngForm вы можете управлять областью по

$scope.open = function () {

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

      };

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

Я добавляю scope:$scope, то он работает .Круто

    Ничего не найдено.

Добавить ответ:
Отменить.