Question

我正在尝试学习新的组件，而且我对绑定和符号的理解很少。

为什么我不能让我的ng-repeat使用这段代码..我尝试过使用controllerAs语法，范围，更改绑定，一切！

APP.JS

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

/* Mock-Data */
app.constant('friends', [{
  firstName: 'Conner',
  lastName: 'A',
  location: 'Melborne, Australia'
}, {
  firstName: 'Dom',
  lastName: 'M',
  location: 'Los Angeles, CA'
}, {
  firstName: 'Bryan',
  lastName: 'A',
  location: 'Seattle, WA'
}, {
  firstName: 'Dan',
  lastName: 'M',
  location: 'Kalispell, MO'
}]);

app.controller('HomeCtrl', ['friends', function(friends) {
  this.$onInit = function() {
    console.log("HomeCtrl has been initialized");
    this.friends = friends;
    console.log(this.friends);
  };
}]);

app.component('myGrid', {
  templateUrl: 'grid.html',
  controller: 'HomeCtrl',
  bindings: {
    data: '<' // I have tried: &,<,=,@
  }
});

的index.html

  <!DOCTYPE html>
  <html lang="en" ng-app="myApp">
  <head>
      <title>My AngularJS App</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>

    <div class="container">

      <my-grid data="friends"></my-grid>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

    <script src="app.js"></script>

  </body>

  </html>

Grid.html

  <div class="panel panel-primary">
    <div class="panel-heading">Angular 1.X - Example Component</div>
    <table class="table">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="employee in data">
          <td>{{ employee.firstName }}</td>
          <td>{{ employee.lastName }}</td>
          <td>{{ employee.location }}</td>
        </tr>
      </tbody>
    </table>
  </div>

无论我尝试什么，我都无法让ng-repeat工作......

Answer 1

你没有在index.html中设置作用域的控制器，以便告诉friends来自哪里。可以添加ng-controller来解决此问题

在使用controllerAs的组件中，设置为vm别名，因此您需要在视图中引用它

的index.html

<div class="container" ng-controller="HomeCtrl as ctrl">
      <my-grid data="ctrl.friends"></my-grid>
</div>

grid.html

<tr ng-repeat="employee in vm.data">

的 DEMO

Answer 2

您的设计有点不正确。您尚未将朋友数据从父作用域传递到您的指令。 Working Plunk inline with you e.g

angular.module("myApp",[])
.controller('ctr1', function($scope, friends){
     $scope.friends=friends;
})
.constant('friends', [{
  firstName: 'Conner',
  lastName: 'A',
  location: 'Melborne, Australia'
}, {
  firstName: 'Dom',
  lastName: 'M',
  location: 'Los Angeles, CA'
}, {
  firstName: 'Bryan',
  lastName: 'A',
  location: 'Seattle, WA'
}, {
  firstName: 'Dan',
  lastName: 'M',
  location: 'Kalispell, MOO'
}])

.component('myGrid', {
  templateUrl: 'grid.html',
  bindings: {
    friends: '<'
  },
  controller:function() {
          this.$onInit = function() {
            console.log(this.friends);
          }
  }
  
})

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="ctr1">
  <div class="container">
    <my-grid friends="friends"></my-grid>
  </div>
</body>

</html>

<!--************************Grid.html****************
<div class="panel panel-primary">
    <div class="panel-heading">Angular 1.X - Example Component</div>
    <table class="table">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Location</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="employee in $ctrl.friends">
          <td>{{ employee.firstName }}</td>
          <td>{{ employee.lastName }}</td>
          <td>{{ employee.location }}</td>
        </tr>
      </tbody>
    </table>
  </div>

为什么我的Angular1.6绑定不起作用？

2 个答案: