Угловая директива: используя нг-модель в точечном объеме

У меня возникли проблемы разработки, как я могу определить пользовательскую директиву, как:Угловая директива: используя нг-модель в точечном объеме

Пользы изолирует область, а
использует директиву нг-модель в новой области внутри шаблона.

Вот пример:

HTML:

<body ng-app="app"> 
    <div ng-controller="ctrl"> 
    <dir model="foo.bar"></dir> 
    Outside directive: {{foo.bar}} 
    </div> 
</body>

JS:

var app = angular.module('app',[]) 
    .controller('ctrl', function($scope){ 
    $scope.foo = { bar: 'baz' }; 
    }) 
    .directive('dir', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
     model: '=' 
     }, 
     template: '<div ng-if="true"><input type="text" ng-model="model" /><br/></div>' 
    } 
    });

желаемое поведение здесь является то, что значение входного является обязательно foo.bar собственности внешней области, в через область действия (изолировать) директивы model. Этого не происходит, потому что директива ng-if в охватывающем div шаблона создает новую область, поэтому обновляется область model, а не область действия директивы. Обычно вы решаете эти проблемы с ng-model, убедившись, что в выражении есть точка, но я не вижу никакого способа сделать это здесь. Интересно, если я мог бы использовать что-то вроде этого для моей директивы:

{ 
    restrict: 'E', 
    scope: { 
    model: { 
     value: '=model' 
    } 
    }, 
    template: '<div ng-if="true"><input type="text" ng-model="model.value" /><br/></div>' 
}

но это не работает ...

Plunker

источник

2014-06-17 Duncan

Вы правы - ng-if создает дочернюю область, которая вызывает проблему при вводе текста в текстовое поле ввода. Он создает теневое свойство с именем «модель» в дочерней области, которое является копией родительской переменной области с тем же именем - эффективно нарушая привязку двухсторонней модели.

Исправить это просто. В шаблоне укажите $ родительской префикс:

template: '<div ng-if="true"> 
        <input type="text" ng-model="$parent.model" /><br/> 
      </div>'

Это гарантирует, что он будет решать «модель» от $ родительской области, которые вы уже настроили для двусторонний модели связывания через изолированную области.

В конце концов, '.' в ng-модели экономит день. Мне полезно подумать обо всем, что осталось от точки, как способ Углового разрешить свойство через наследование сферы. Без точки разрешение свойства становится проблемой только при назначении переменных области (в противном случае поиск выполняется нормально, в том числе только для чтения {{model}}).

источник

2014-06-17 14:28:46 pixelbits

Спасибо. Я полностью забыл о $ parent.Это действительно решает мою проблему в этом случае, но я все еще немного сомневаюсь в этом как решение общего назначения: это означает, что я должен отслеживать, где в моих шаблонах вводятся новые области и какой уровень иерархии мне нужен цель, которая кажется довольно подверженной ошибкам ... – Duncan

Я согласен с вами. Миско объяснил, что кто-то регистрирует ошибку об этом примерно раз в неделю - на самом деле это не ошибка, ее способ прототипического наследования работает. Чтобы правильно установить ng-модель, вам нужно знать, как наследование областей работает на более глубоком уровне, а также какие директивы создадут дочерние области. Однако я не могу придумать лучшего способа. – pixelbits

Да, справедливая точка зрения, хотя я предполагаю, что я получаю то, что существует особая проблема с использованием ng-model = "$ parent.bar" в отличие от ng-model = "foo.bar", в том, что с прежним Мне всегда нужно думать о том, где создаются области видимости, тогда как с последним я этого не делаю (пока я не могу предположить, что у дочерних областей нет свойства, называемого «foo»). – Duncan

ng-if создает дополнительный prototypally наследующий сферу, так ng-model="model" связывается с унаследованным свойством новой области действия, а не с 2-сторонним связыванием свойства области действия.

Измените его на ng-show и он будет work.

Вы можете использовать a small Firebug extension, который я написал для проверки угловых областей.

источник

2014-06-17 14:21:40

Да, я понимаю, что это то, что происходит. Я использовал ng, если специально для демонстрации проблемы. – Duncan

Угловая директива: используя нг-модель в точечном объеме

ответ

Смежные вопросы