Deklarieren komplexes Objekt in isolierten Umfang

Question

ich eine dateRangePicker-Direktive, die ich so erklären:

<date-range-picker start="schedule.start" end="schedule.end"></date-range-picker> 

Meine Richtlinie wie folgt erklärt:

.directive("dateRangePicker", function() { 
     return { 
      restrict: 'E', 
      require: '^form', 
      scope: { 
        start: '=', 
        end: '=' 
      }, 
      replace: true, 
      templateUrl: 'dateRangePicker.tpl.html', 
      link: function (scope, elm, attrs, ctrl) { 

Das Problem, dass meine Vorlage ist: dateRangePicker.tpl.html initialisiert einen untergeordneten Bereich (die DatePicker-Komponente des angular-ui führt dies über den entsprechenden Controller aus), so dass jeder Versuch, Werte in scope.start oder scope.end zu schreiben, den Geltungsbereich der Richtlinie nicht beeinflusst.

Ich mag würde meinen isoliert Umfang erklären, so dass der Konflikt nicht auftreten:
scope.schedule.start und scope.schedule.end.

Ich habe versucht, dies zu tun:

return { 
      restrict: 'E', 
      require: '^form', 
      scope: { 
       schedule: { 
        start: '=start', 
        end: '=end' 
       } 
      } 

Aber dieser Fehler auftritt:
Error: 'undefined' is not a function (evaluating 'definition.match(LOCAL_REGEXP)')

Gibt es eine Möglichkeit, es unter Verwendung von isoliertem Umfang zu erreichen?

Ich möchte einfach nicht die Bereiche durch scope:false propagieren (das funktioniert, ich habe es getestet), um eine gute Kapselung zu halten.

Answer 1

Sie können ein komplexes Objekt an den Bereich übergeben, aber nicht die von Ihnen verwendete Syntax verwenden. Ihre übergeordneten Bereich sollte Zeitplan bezwecken und dann in HTML können Sie

<date-range-picker schedule="schedule"></date-range-picker> 

tun Jetzt können Sie es in isolierten Bereich verwenden die bekannte Syntax

scope :{ 
    schedule:'=' 
}