無法讀取未定義的角度指令的數據“objectname”

Question

無法從父作用域讀取數據到指令。 得到錯誤像

類型錯誤：無法讀取未定義的屬性“rowCollection”

你能幫我解決這個問題嗎？

HTML

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

網格 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 控制器

(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

因此，您有一個具有獨立作用域的指令。 在這種情況下，鏈接函數中的scope參數指的是這個范圍，在你的情況下是下一個對象

{
    'options': '='
}

所以，當你在HTML做options="one.rowCollection" one.rowCollection的值綁定到選項屬性，所以訪問它，你應該使用scope.options在鏈接功能，在查看剛剛選項。

還將$parent屬性設置為父范圍，在您的情況下 - “ctrl1”控制器范圍。 所以你可以直接進入控制器並獲得你想要的。

當使用控制器作為保存在控制器范圍內的控制器的語法參考時。 因此，對於訪問控制器，您應該使用它的名稱。

樣本：

 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>

Answer 2

您向指令范圍添加了options ，因此您可以通過scope.options直接訪問它。 順便說一下，指令作用域是隔離的（使用scope: {}表示法），所以你不能只是上去嘗試讀取父作用域。