Konnte vererbtes/isoliertes Scope-Konzept in meinem Beispiel nicht verwenden.

Question

Ich lerne vererbte/isolierte Scopes in eckigen Direktiven und schlug mit einigen grundlegenden Konzepten. Bitte beachten Sie den untenstehenden Plott.

Example.

Szenario1:

Ich habe 2 Richtlinien (Buch und Details). Ich zeige zwei "Buchdetails" -Container an und schalte den Buchnamen um, indem ich benutzerdefinierte Attribute wie diese sende.

<book bookdetails="book" collapsed="yes" list="list"></book> 
<book bookdetails="book1" collapsed="no" list="list"></book>  

Frage: Ist das der richtige Weg, um Dinge in 2 verschiedenen Containern anzuzeigen?

Szenario 2:

Ich möchte den Autor Details Abschnitt in Behälter 1, jedoch zeigen in container2 auf Last verstecken. Wie erreiche ich das?

Wenn ich diese Zeile unten verwende, wird es beide Autordetails verbergen und anzeigen, aber ich möchte es getrennt halten.

<details collapsed="yes"></details> 

Ich weiß, ich fehlen grundlegende Fähigkeiten mit geerbten/isolierten Bereichen. Kann mir jemand etwas beibringen?

Answer 1

Es ist in Ordnung, geschachtelte Anweisungen zu verwenden, so wie Sie es getan haben, damit Sie alles, was mit dem Detailbereich im Detail-Controller zu tun hat, wie Elemente aus der Bücherliste entfernen können.

Wenn Sie keine Logik in Details Controller tun würde und nur einige HTML-Code würde ich einfach ng-include verwenden.

Einige Punkte, die ich während der Verbesserung der Code erkannt haben:

• Template Markups sind teilweise HTML-Dateien, so dass keine Notwendigkeit Header hinzufügen, Körper usw. Fügen Sie einfach Ihr Markup, die Sie in Ihrer Richtlinie benötigen.

• Ich habe ein Modellarray books erstellt, das Sie mit ng-repeat und nicht zwei separaten Bereichsvariablen iterieren können. Das ist einfacher, mehr Bücher hinzuzufügen.

• Ich würde den minimierten Zustand nicht zu Direktive isolated Scope übergeben. Ich würde es dem Buchmodell hinzufügen, dann können Sie unabhängige Zustände der Detailfenster haben. Sie können auch eine reduzierte Bereichsbereichsvariable separat von Ihrem Modell erstellen und sie wie ng-hide='collapsed[$index]' verwenden, wenn Sie sie nicht Ihrem Modell hinzufügen möchten.

• Nicht mit der Zeichenfolge yes vergleichen. Es macht die Dinge komplizierter. Es ist besser, true oder false zu verwenden.

• Die Liste, die Sie übergeben, ist OK, wenn Sie für jeden Detailbereich eine Liste verwenden möchten. Aber ich denke, du brauchst sie unabhängig voneinander, also füge sie deinem Buchmodell hinzu.

• Um einen Wert zu synchronisieren, können Sie die js-Kurzschrift verwenden: collapsed = !collapsed;. Er nimmt den Wert von collapsed und invertiert ihn und weist ihn erneut dem Collapsed zu.

• Details Direktive: Sie müssen keine Attribute an eine Anweisung übergeben, die keinen isolierten Bereich verwendet. Stattdessen können Sie den geerbten Bereich des übergeordneten Elements direkt verwenden.

Hinweis: Ich denke, Sie einen Blick auf angular-ui-bootstrap haben sollten und ein Akkordeon verwenden, anstatt Ihre später manuell erstellten Scheiben. Aber zum Lernen von Richtlinien ist Ihr Code in Ordnung.

Bitte sehen Sie sich Ihren aktualisierten Code unten oder in diesem plunker an.

Wenn etwas nicht klar ist, zögern Sie nicht, einen Kommentar hinzuzufügen, und ich werde versuchen, zu helfen.

angular.module('plunker', []) 
 
    .controller('MainCtrl', function($scope) { 
 
    $scope.books = [{ 
 
     id: 0, 
 
     name: 'Building modern ASP.NET 5', 
 
     author: { 
 
     name: 'name1', 
 
     age: 31, 
 
     country: 'USA' 
 
     }, 
 
     collapsed: false, 
 
     list: [{ 
 
     id: 0, 
 
     name: 'book1' 
 
     }, { 
 
     id: 1, 
 
     name: 'book2' 
 
     }, { 
 
     id: 2, 
 
     name: 'book3' 
 
     }] 
 
    }, { 
 
     id: 1, 
 
     name: 'AngularJS', 
 
     author: { 
 
     name: 'name2', 
 
     age: 27, 
 
     country: 'USA' 
 
     }, 
 
     collapsed: true, 
 
     list: [{ 
 
     id: 0, 
 
     name: 'book1' 
 
     }, { 
 
     id: 1, 
 
     name: 'book2' 
 
     }, { 
 
     id: 2, 
 
     name: 'book3' 
 
     }] 
 
    }]; 
 
    //$scope.list = ["book1", "book2", "book3"]; 
 
    }).directive('book', function() { 
 
    return { 
 
     restrict: 'E', 
 
     templateUrl: 'book.html', 
 
     scope: { 
 
     bkdet: "=bookdetails" 
 
      //list: "=" 
 
      //collapsed: "@" 
 
     }, 
 
     controller: function($scope) { 
 
     $scope.toggleDetails = function() { 
 
      $scope.bkdet.collapsed = !$scope.bkdet.collapsed; 
 
      updateCaption(); 
 
     }; 
 

 
     function updateCaption() { 
 
      $scope.hypshowhide = $scope.bkdet.collapsed ? 'show details' : 'hide details'; 
 
     } 
 

 
     // first run 
 
     updateCaption(); 
 
     /*if ($scope.collapsed == 'yes') 
 
     { 
 
      $scope.dethide = true; 
 
     } 
 
     else { 
 
      $scope.dethide = false; 
 
     }  */ 
 
     //$scope.hypshowhide = 'show details'; 
 
     } 
 
    } 
 
    }) 
 
    .directive('details', function() { 
 
    return { 
 
     restrict: 'E', 
 
     templateUrl: 'details.html', 
 
     controller: function($scope) { 
 
     /*console.log($scope.bkdet.collapsed); 
 
     if (!$scope.bkdet.collapsed) { //== 'yes') { 
 
      $scope.dethide = true; 
 
     } 
 
     else { 
 
      $scope.dethide = false; 
 
     }*/ 
 

 
     $scope.removeItem = function(index) { 
 
      $scope.bkdet.list.splice(index, 1); 
 
     } 
 
     } 
 
    } 
 
    })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="plunker"> 
 
    <div ng-controller="MainCtrl"> 
 
    <div class="container"> 
 
     <book bookdetails="book" ng-repeat="book in books"></book> 
 
    </div> 
 
    </div> 
 
    <script type="text/ng-template" id="book.html"> 
 
    <div class="row"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h1>Book Details</h1> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <a class="pull-right" href="#" ng-click="toggleDetails(collapsed)">{{hypshowhide}}</a> 
 
      <div> 
 
      <!--ng-hide="dethide">--> 
 
      {{bkdet.name}} 
 
      </div> 
 
      <!--<details collapsed="no"></details>--> 
 
      <details></details> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </script> 
 

 
    <script type="text/ng-template" id="details.html"> 
 
    <div class="container" ng-hide="bkdet.collapsed"> 
 
     <div class="row"> 
 
     <ul class="list-group list-unstyled"> 
 
      <!--<li> 
 
      <h1>Author:</h1> 
 
     </li> 
 
     <li> 
 
      <ul>--> 
 
      <li> 
 
      <strong>Author</strong> 
 
      {{bkdet.author.name}} 
 

 
      </li> 
 
      <li> 
 

 
      <strong>Age</strong> 
 
      {{bkdet.author.age}} 
 

 
      </li> 
 
      <li> 
 
      <strong>Country</strong> 
 
      {{bkdet.author.country}} 
 
      </li> 
 
      <li> 
 
      <div ng-if="bkdet.list.length == 0"> 
 
       <p>No books here!</p> 
 
      </div> 
 
      <div ng-repeat="c in bkdet.list"> 
 
       <p> 
 
       {{c.name}}&nbsp; 
 
       <button class="btn btn-danger" ng-click="removeItem($index)">X</button> 
 
       </p> 
 
      </div> 
 
      </li> 
 
      <!--</ul> 
 
     </li>--> 
 

 
     </ul> 
 
     </div> 
 
    </div> 
 
    </script> 
 
</div>