Kann die Daten "Objektname" der undefinierten Winkelanweisung nicht lesen

Question

Die Daten vom übergeordneten Bereich können nicht in Direktive gelesen werden. Fehler erhalten wie

TypeError: Cannot read property 'rowCollection' of undefined

Können Sie mir bitte dabei helfen.

HTML

<div ng-controller="ctrl1 as one"> 
    <ltcg-table options="one.rowCollection"></ltcg-table>  
</div> 

Grid HTML

<table st-table="rowCollection" class="table table-striped"> 
    <thead> 
    <tr> 
     <th>first name</th> 
     <th>last name</th> 
     <th>birth date</th> 
     <th>balance</th> 
     <th>email</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="row in rowCollection"> 
     <td>{{row.firstName}}</td> 
     <td>{{row.lastName}}</td> 
     <td>{{row.birthDate}}</td> 
     <td>{{row.balance}}</td> 
     <td>{{row.email}}</td> 
    </tr> 
    </tbody> 
</table> 

Javascript-Controller

(function() { 

     var myApp = angular.module('myApp', ['smart-table']); 

      function one() { 
         this.song="Murali"; 
         // alert("gg"); 
        this.rowCollection = [ 
         {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'}, 
         {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'}, 
         {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'} 
        ]; 
         //alert($scope.gridOptions.columnDefs[1].name); 
         //alert($scope.gridOptions); 
      }; 




     myApp.directive('ltcgTable', function() { 

      return { 
       restrict: 'E', 
       transclude: true, 
       scope: { 
        'options': '=' 
       }, 
       templateUrl: "ltcg-table.html", 
       link: function(scope, element, attr) { 
         alert(scope.$parent.options.rowCollection); 
         scope.rowCollection = scope.options.rowCollection; 
       } 
       }    
     }); 

     myApp.controller('ctrl1', one) 



})(); 

Answer 1

Sie haben zu Ihrem Anweisungsbereich, so dass Sie direkt über scope.options darauf zugreifen können. Übrigens sind Direktiven-Bereiche isoliert (mit der Notation scope: {}), so dass Sie nicht einfach nach oben gehen und versuchen können, Parent-Bereiche zu lesen.

Answer 2

Sie haben also eine Direktive mit isoliertem Bereich. In diesem Fall scope Parameter in Link-Funktion referes diesen Umfang, in Ihrem Fall dieses nächsten Objekt

{ 
    'options': '=' 
} 

Also, wenn Sie tun, in html options="one.rowCollection" Wert von one.rowCollection-Optionen binded wurde Eigenschaft, so dass für Zugriff darauf sollten Sie scope.options in Link-Funktion verwenden, nur Optionen in Sicht.

auch $parent Eigenschaft auf übergeordneten Bereich festgelegt, in Ihrem Fall - "Ctrl1" Controller-Bereich. So können Sie direkt zum Controller gehen und bekommen, was Sie wollen.

Bei Verwendung Controller als Syntax Verweis auf Controller im Controller-Bereich gespeichert. Also für Access Controller sollten Sie seinen Namen verwenden.

Probe:

var myApp = angular.module('myApp', []); 
 

 
function one() { 
 
    this.song = "Murali"; 
 
    // alert("gg"); 
 
    this.rowCollection = [{ 
 
    firstName: 'Laurent', 
 
    lastName: 'Renard', 
 
    birthDate: new Date('1987-05-21'), 
 
    balance: 102, 
 
    email: 'whatever@gmail.com' 
 
    }, { 
 
    firstName: 'Blandine', 
 
    lastName: 'Faivre', 
 
    birthDate: new Date('1987-04-25'), 
 
    balance: -2323.22, 
 
    email: 'oufblandou@gmail.com' 
 
    }, { 
 
    firstName: 'Francoise', 
 
    lastName: 'Frere', 
 
    birthDate: new Date('1955-08-27'), 
 
    balance: 42343, 
 
    email: 'raymondef@gmail.com' 
 
    }]; 
 
    //alert($scope.gridOptions.columnDefs[1].name); 
 
    //alert($scope.gridOptions); 
 
}; 
 

 
myApp.directive('ltcgTable', function() { 
 

 
    return { 
 
    restrict: 'E', 
 
    transclude: true, 
 
    scope: { 
 
     'options': '=' 
 
    }, 
 
    templateUrl: "ltcg-table.html", 
 
    link: function(scope, element, attr) { 
 
     //go to controller directly 
 
     scope.rowCollection = scope.$parent.one.rowCollection 
 
    } 
 
    } 
 
}); 
 

 
myApp.controller('ctrl1', one)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="ctrl1 as one"> 
 
    <ltcg-table options="one.rowCollection"></ltcg-table> 
 
    </div> 
 
    <script id="ltcg-table.html" type="text/ng-template"> 
 
    <table st-table="rowCollection" class="table table-striped"> 
 
     <thead> 
 
     <tr> 
 
      <th>first name</th> 
 
      <th>last name</th> 
 
      <th>birth date</th> 
 
      <th>balance</th> 
 
      <th>email</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td colspan="5"> 
 
      Get data from scope.options 
 
      </td> 
 
     </tr> 
 
     <tr ng-repeat="row in options"> 
 
      <td>{{row.firstName}}</td> 
 
      <td>{{row.lastName}}</td> 
 
      <td>{{row.birthDate}}</td> 
 
      <td>{{row.balance}}</td> 
 
      <td>{{row.email}}</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="5"> 
 
      <hr/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="5"> 
 
      Get data saved from controller directly in link function 
 
      </td> 
 
     </tr> 
 
     <tr ng-repeat="row in rowCollection"> 
 
      <td>{{row.firstName}}</td> 
 
      <td>{{row.lastName}}</td> 
 
      <td>{{row.birthDate}}</td> 
 
      <td>{{row.balance}}</td> 
 
      <td>{{row.email}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </script> 
 
</div>