angularjs - Verwenden Sie die Anweisung, um den übergeordneten Bereich zu ändern

Question

Ich versuche, eine übergeordnete Bereichseigenschaft innerhalb einer Direktive zu ändern.

Das ist die Struktur dieses Abschnitts meines Projektes (Es hilft zu verstehen, was vor sich geht):

-details 
--overview.html 
--edit.html 
--main.html 
-directive 
--template.html 
--controller.js 

Richtlinie/controller.js

restrict: 'E' 
    scope: { 
    mode: '@mode', 
    id: '@id' 
    }, 
    replace: true, 
    templateUrl: './directive/template.html', 
    link: function (scope, element, attrs){ 
    console.log ("link function scope:", scope); 
    console.log ("Parent Scope:", scope.$parent.$parent.current); 
    } 

Richtlinie/template .html:

<div class="Selector"> 
    <div> 
     <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open-{{id}}"/> 
     <label class="menu-open-button" for="menu-open-{{id}}"> 
      <i class="zone-details-current-mode icon-mode-{{mode}}"></i> 
      <span class="hamburger hamburger-1"></span> 
      <span class="hamburger hamburger-2"></span> 
      <span class="hamburger hamburger-3"></span> 
     </label> 
    </div> 
</div> 

Ich nenne die oben genannte Richtlinie von Details/main.html wie unten:

<selector mode="{{current.mode}}" id="{{current.ID}}"></selector> 

meines app.js Router-Konfiguration der folgende ist:

.config([ 
    '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $stateProvider.state('app.details', { 
     name: 'appDetails', 
     url: '/:zoneID', 
     views: { 
     'appContent': { 
      templateUrl: './details/main.html', 
      controller: 'mainController' 
     } 
     } 
    }).state('app.details.overview', { 
     name: 'appDetailsOverview', 
     url: '/overview', 
     views: { 
     'appContent': { 
      templateUrl: './details/main.html', 
      controller: 'mainController' 
     }, 
     'zone': { 
      templateUrl: './details/overview.html', 
      controller: 'mainController' 
     } 
     } 
    }).state('app.details.edit', { 
     name: 'appDetailsEdit', 
     url: '/edit/day/:timerEditDay', 
     views: { 
     'appContent': { 
      templateUrl: './details/main.html', 
      controller: 'mainController' 
     }, 
     'zone': { 
      templateUrl: './details/edit.html', 
      controller: 'mainController' 
     } 
     } 
    }); 
    $urlRouterProvider.otherwise('app/myHouse'); 
    } 
]); 

Was diese Richtlinie soll in der Lage sein, zu tun ist, den Modus zu ändern, wenn auf eine bestimmte Schaltfläche geklickt wird. Der Modus ist innerhalb scope.current, aber, um auf scope.current zuzugreifen, verstehe ich nicht, warum ich zwei $parent s anhängen muss.

Wenn Sie den Modus ändern, muss der Abschnitt mit dem neuen Modus aktualisiert werden.

Irgendwelche Hilfe dabei? Wie kann ich mit der Anweisung den übergeordneten Bereich ändern? Danke für jede Hilfe und Vorschlag

Answer 1

scope: { 
    mode: '=mode', // CHANGE THIS TO = 
    id: '@id' 
}, 
// remove brackets here 
<selector mode="current.mode" id="{{current.ID}}"></selector> 
// in link function 
scope.mode = [new mode]; 

über den letzten Punkt: nur eine $ Bereich verwenden $ Uhr in Ihrem Controller.. Oder Sie können für $ on/$ emit gehen. Überprüfen Sie die kantige Ereignisbehandlung im Netz, es ist ziemlich einfach.

Answer 2

Ändern Sie den Modus auf =mode, um die Zwei-Wege-Datenbindung zu aktivieren, @ übergibt Wert als Zeichenfolge.

scope: { 
    mode: '=mode', 
    id: '@id' 
},