Wie funktioniert Childscope bei einer ng-if-Anweisung? Speziell in einem <SELECT> Element

Question

HINWEIS: Ich bin ein neues Mitglied hier, also konnte ich nicht direkt kommentieren und um Klärung bitten.

Also, meine Frage ist: Wie kann ich um arbeiten ng-wenn ein Kind Rahmen für ein ausgewähltes Element zu schaffen?

Ich habe den folgenden Code:

HTML

 <select id="project-select" 
      ng-if="projects.length > 0" 
      ng-options="project.name for project in projects" 
      ng-model="currentProject" 
      ng-change="broadcastChange('project-changed', currentProject)"> 
     </select> 

Und mein Controller eingerichtet ist, in folgendem Format: "

function Controller() { 
    //Do code stuffz 
} 
angular 
    .module('app') 
    .controller('Controller', Controller); 

ich aus this Post erfuhr, dass die ng-if "erstellt einen untergeordneten Bereich.

Also selbst wenn sich das Modell ändert, bleibt dieser Teil das gleiche, weil es ein Grundwert ist: (Name nur ein String)

<div id="current-project" class="pull-left"> 
    <strong>Project: </strong>{{currentProject.name}} 
</div> 

Des Weiteren in dem oben genannten Beitrag gibt ein paar Optionen waren.

a. Ändern Sie einfach auf diese: ng-model="$parent.currentProject", die ein wenig hacky

b fühlt. Legen Sie den Objektwert im Controller fest. Ich bin mir nicht ganz sicher, wie das geht. Ich habe das Gefühl, dass es eine einfache Lösung ist, aber ich übertreibe es irgendwie.

Wie auch immer, für jetzt habe ich einfach geändert ng-if zu ng-show und das ist das Problem gelöst. Ich versuche jedoch, Angular tiefer zu verstehen, und ich habe das Gefühl, dass dieses Problem ein bisschen besser erklärt werden könnte. Danke im Voraus!

Answer 1

Was Sie mit kantigem Umfang Variablen finden: immer verwenden, um einen Punkt.

Das ist das Mantra von der ausgezeichneten ng-book

In Ihrem Fall ist, das, was bedeutet, ist dies:

Sie haben diesen Code:

<select id="project-select" 
     ng-if="projects.length > 0" 
     ng-options="project.name for project in projects" 
     ng-model="currentProject" 
     ng-change="broadcastChange('project-changed', currentProject)"> 
    </select> 

Was bedeutet, dass Sie einen $ verbindlich Bereichsvariable genannt $scope.currentProject.

Aufgrund der mysteriösen und genialen Art, dass Javascript funktioniert, wird dies nicht aktualisiert werden, wenn Sie in einem Kind Bereich sind.

Zum Glück ist die Lösung eigentlich ganz einfach. Stattdessen erstellen Sie ein Objekt wie folgt:

$scope.myData = { 
    currentProject: '' 
} 

Und in Ihrem Markup, binden an, dass etwa so:

<select id="project-select" 
     ng-if="projects.length > 0" 
     ng-options="project.name for project in projects" 
     ng-model="myData.currentProject" 
     ng-change="broadcastChange('project-changed', myData.currentProject)"> 
    </select> 

Und voila. Es wird aktualisiert, obwohl es sich in einem untergeordneten Bereich befindet.

Dies ist eigentlich sehr nützlich, weil Sie jetzt eine Möglichkeit haben, Variablen "sinnvoll" zu gruppieren. Hier einige andere Pseudo-Code zu zeigen, was ich meine:

$scope.projectData = { 
    currentProjectID: 1, 
    currentProjectTitle: 'My Cool Project', 
    projects: [ 
      {id: 1, name: 'My Cool Project'}, 
      {id: 2, name: 'Another Project'} 
     ], 
    someOtherProperty: false 
    // ...etc.... 
} 

Als Randnotiz in diesem Abschnitt dieses Artikels könnte hilfreich sein: http://docstore.mik.ua/orelly/webprog/jscript/ch11_02.htm#jscript4-CHP-11-SECT-2.1

Answer 2

Wenn alles, was Sie tun mögen Show/Ausblenden das select-Element basierend auf den Projekten in Ihrem ‚Controller‘ Steuerungsbereich, dann ng-Show der richtige Weg ist hier zu gehen. Meiner Erfahrung nach habe ich ng-if verwendet, wenn ich bedingt eine größere "partielle" Ansicht mit zahlreichen Steuerelementen geladen habe, wo ich einen separaten Bereich für notwendig hielt, um einen sehr großen Bereich zu vermeiden (oder die Wiederverwendung zu erleichtern).

Answer 3

Sie haben Recht. Verwenden Sie nicht $parent in irgendeiner Produktion Angular apps. Es macht Ihr Modell abhängig von der Struktur Ihrer Sicht, wodurch Ihr Code schwer zu refaktorisieren und weniger modularisiert wird.

Objekteigenschaften Die Bindung ist der Weg zu gehen, wie Sie in Ihrem „b“ Antwort vorgeschlagen. Die empfohlene Vorgehensweise in der neuesten Version von Angular 1.x ist die Verwendung der Syntax "controller as". Diese Methode nutzt die "prototypische Vererbung" in Javascript. Es gibt eine gute Erklärung hier: http://javascript.info/tutorial/inheritance

Ich habe einen Plünderer für Sie erstellt, um zu demonstrieren, wie die Bindung an Objekteigenschaften in verschachtelten Bereichen funktioniert. Sehen Sie sich die "controller as" -Syntax an. Versuchen Sie auch, den Wert von ctrl.testBinding in der Eingabe zu ändern. Sie werden sehen, dass sich das im untergeordneten Bereich ng-if widerspiegelt. Ich werde versuchen, einige Links zu finden, um dies genauer zu erklären .

https://plnkr.co/edit/Gx5xbkJXgzjPSG8kajPR?p=preview

<!DOCTYPE html> 
<html > 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="testApp"> 
    <div ng-controller="testCtrl as ctrl"> 
     <input ng-model="ctrl.testBinding" type="text"/> 
     <button ng-click="ctrl.toggle()">toggle show</button> 
     <div ng-if="ctrl.show"> 
     {{ ctrl.testBinding }} 
     </div> 
    </div> 
    </body> 

</html> 

//script.js 
function testController($scope) { 
    var vm = this; 
    vm.show = true; 
    vm.toggle = function(){ 
     vm.show = !vm.show 
    } 
} 
angular 
    .module('testApp', []) 
    .controller('testCtrl', testController);