无法读取数据“;对象名称“;未定义的角度方向

Cannot read data "objectname" of undefined angular directive

本文关键字:未定义 方向 对象 读取 数据      更新时间:2023-09-26

无法从父作用域读取指令的数据。正在获取类似的错误

TypeError:无法读取未定义的属性"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)

})();

因此,您有一个具有独立作用域的指令。在这种情况下,链接函数中的scope参数引用了这个范围,在您的情况下,这个下一个对象

{
    'options': '='
}

因此,当您在html中执行options="one.rowCollection"时,one.rowCollection的值被绑定到options属性,因此要访问它,您应该在链接函数中使用scope.options,只在视图中的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>

您已将options添加到指令范围中,因此可以通过scope.options直接访问它。顺便说一句,指令作用域是隔离的(使用scope: {}表示法),所以您不能只是上去尝试读取父作用域。