kątowa dyrektywy: using ng model w ciągu izolowania zakresu

Mam problemy wypracowanie jak mogę zdefiniować niestandardową że obie dyrektywy:kątowa dyrektywy: using ng model w ciągu izolowania zakresu

zastosowania odizolowania zakres, a
Używa dyrektywę ng model w nowym zakresie w ramach swojego szablonu.

Oto przykład:

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>' 
    } 
    });

pożądanego zachowania jest to, że wartość na wejściu jest zobowiązany do zewnętrznego oscyloskopu foo.bar nieruchomości, za pośrednictwem właściwości dyrektywy (izolatu) zakresu model. Tak się nie dzieje, ponieważ dyrektywa ng-if na dołączonym przez div szablonie tworzy nowy zakres, więc aktualizowany jest ten zakres model, a nie zakres dyrektywy. Zwykle rozwiązujesz te problemy z modelem ng, upewniając się, że w wyrażeniu jest kropka, ale nie widzę żadnego sposobu, aby to zrobić tutaj. Zastanawiałem się, czy mogę być w stanie używać coś takiego na moim dyrektywy:

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

ale to nie działa ...

Plunker

Źródło

2014-06-17 Duncan

Masz rację - ng-if tworzy zakres podrzędny, który powoduje problem podczas wprowadzania tekstu w polu tekstu wejściowego. Tworzy właściwość cienia o nazwie "model" w zasięgu podrzędnym, która jest kopią nadrzędnej zmiennej zasięgu o tej samej nazwie - skutecznie zrywającej powiązanie modelu dwukierunkowego.

Poprawka jest prosta. W szablonie określić przedrostek $ parent:

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

Gwarantuje to, że będzie to rozwiązać „model” z zakresu $ rodzic, który masz już setup dla dwukierunkowego modelu wiązania przez pojedyncze zakresie.

Na koniec "." w modelu ng oszczędza dzień. Uważam, że warto myśleć o wszystkim, co pozostało z kropki, aby Angular mógł rozwiązać własność poprzez dziedziczenie zakresu. Bez kropki rozwiązywanie problemu staje się problemem tylko wtedy, gdy przypisujemy zmienne zakresu (w przeciwnym razie sprawdzenia są w porządku, w tym wyrażeń wiążących tylko do odczytu {{model}}).

Źródło

2014-06-17 14:28:46 pixelbits

Dzięki - zupełnie zapomniałem o rodzicu $.To ma rozwiązać mój problem w tym przypadku, ale nadal jestem trochę niezdecydowany o nim jako rozwiązanie ogólnego przeznaczenia: to oznacza, że muszę śledzić gdzie nowe zakresy są wprowadzane w moich szablonów i jaki poziom hierarchii muszę cel, który wydaje się być podatny na błędy ... – Duncan

Zgadzam się z tobą. Misko wyjaśnił, że ktoś loguje o tym błąd raz w tygodniu - to nie jest błąd, tak jak działa dziedziczenie prototypowe. Aby poprawnie ustawić model ng, musisz wiedzieć, jak dziedziczenie zakresu działa na głębszym poziomie, a także które dyrektywy będą tworzyć zakresy potomne. Nie mogę wymyślić lepszego sposobu. – pixelbits

Tak, słuszna uwaga, choć myślę, co mi się w to, że jest to szczególny problem z użyciem ng-Model = „$ parent.bar” w przeciwieństwie do NG-Model = „foo.bar”, w tym z byłego zawsze trzeba myśleć o tym, gdzie dziecko zakresy są tworzone, natomiast z nią zrobić, nie (tak długo, jak mogę założyć, że żadne dziecko zakresy mają właściwość o nazwie „foo”). – Duncan

ng-if tworzy dodatkowy zakres prototypally dziedziczenie, więc ng-model="model" łączy się z odziedziczoną właściwością nowego zakresu, a nie z dwukierunkową właściwością powiązaną zakresu dyrektywy.

Zmień na ng-show i będzie to work.

Możesz użyć numeru a small Firebug extension, który napisałem, aby sprawdzić zakresy kątowe.

Źródło

2014-06-17 14:21:40

Tak, rozumiem, że to właśnie się dzieje - użyłem ng -uznacznie, aby zademonstrować problem. – Duncan

kątowa dyrektywy: using ng model w ciągu izolowania zakresu

Odpowiedz

Powiązane problemy