我的Angular1.6綁定怎麼不起作用？

我想學習新的組件，並且我對綁定和符號有一個很弱的理解。我的Angular1.6綁定怎麼不起作用？

爲什麼我不能讓我的重複使用此代碼..我試過使用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>

無論我怎麼努力，我可以不是G et ng-repeat to work ..

來源

2017-02-03 Connor

從你在哪裏路過的朋友爲您電網指令？他們應該是一些家長控制器，在那裏你可以注入你的服務並附加數據到示波器將其傳遞給指令 – Dev

您沒有在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

來源

2017-02-03 18:51:53 charlietfl

但是那麼在組件中聲明控制器有什麼意義呢？據我所知，這會導致控制器被實例化兩次？ – Connor

你需要一個外部控制器，所以你甚至可以將這些數據傳入組件 – charlietfl

你能告訴我一篇文章或一些能夠幫助我理解的文章嗎？我不明白爲什麼。我想通過綁定控制器到組件，該組件具有來自data =「scope variable」 – Connor

你的設計是位incorrect.You沒有通過朋友數據到你的指令從父範圍。 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="[email protected]" 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>

來源

2017-02-03 19:04:41 Dev

我的Angular1.6綁定怎麼不起作用？

回答

相關問題