在此angular.js示例中創建指令有什么意義？
[英]What's the point of creating a directive in this angular.js example?
問題描述
因此，我正在關注有關Angular.js的代碼學院的教程。 我了解每一步，這些都是顯示簡單游戲板的最終文件。 我的問題是：為什么我們需要麻煩創建一個名為game的指令並將其鏈接到game.html來顯示內容？ 我們已經在ScopeController文件中提供了$ scope。 為什么我們不能只轉到index.html文件，而只使用帶有ng-repeat的表達式進行顯示，如下所示：{{scope.visitor_score}}。 因此，我們不能只是在index.html文件中完成所有操作，而不是發出指令嗎？
index.html的：
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="GameboardApp">
<div class="header">
<h1 class="logo">GameBoard</h1>
</div>
<div class="main" ng-controller="ScoreController">
<div class="container">
<div class="row">
<game info="score" ng-repeat="score in scores"></game>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/ScoreController.js"></script>
<!-- Directives -->
<script src="js/directives/game.js"></script>
</body>
</html>
app.js：
var app = angular.module('GameboardApp',[]);
ScopeController.js
app.controller('ScoreController', ['$scope', function($scope) {
$scope.scores = [
{
datetime: 1420848000000,
visitor_team: {
city: "Charlotte",
name: "Hornets"
},
home_team: {
city: "New York",
name: "Knicks"
},
period: "Final",
visitor_score: 110,
home_score: 82
},
{
datetime: 1420848000000,
visitor_team: {
city: "Dallas",
name: "Mavericks"
},
home_team: {
city: "Los Angeles",
name: "Clippers"
},
period: "Final",
visitor_score: 100,
home_score: 120
},
{
datetime: 1420848000000,
visitor_team: {
city: "Brooklyn",
name: "Nets"
},
home_team: {
city: "Detroit",
name: "Pistons"
},
period: "Third Quarter",
visitor_score: 69,
home_score: 74
},
{
datetime: 1420848000000,
visitor_team: {
city: "Indiana",
name: "Pacers"
},
home_team: {
city: "Philadelphia",
name: "76ers"
},
period: "Third Quarter",
visitor_score: 70,
home_score: 72
},
{
datetime: 1420848000000,
visitor_team: {
city: "San Antonio",
name: "Spurs"
},
home_team: {
city: "Minnesota",
name: "Timberwolves"
},
period: "Halftime",
visitor_score: 58,
home_score: 43
},
{
datetime: 1420848000000,
visitor_team: {
city: "Orlando",
name: "Magic"
},
home_team: {
city: "Portland",
name: "Trail Blazers"
},
period: "First Quarter",
visitor_score: 13,
home_score: 26
}
]
}]);
game.html：
<div class="col-sm-4">
<div class="row scorecard">
<p class="period">{{ info.period }} </p>
<div class="visitor col-xs-4">
<h2 class="visitor-score">{{ info.visitor_score }} </h2>
<h3>
<span class="visitor-city">{{ info.visitor_team.city }} </span><br/>
<span class="visitor-name">{{ info.visitor_team.name }} </span>
</h3>
</div>
<div class="dash col-xs-3">
<h2>-</h2>
</div>
<div class="home col-xs-4">
<h2 class="home-score">{{ info.home_score }} </h2>
<h3>
<span class="home-city">{{ info.home_team.city }} </span><br/>
<span class="home-name">{{ info.home_team.name }} </span>
</h3>
</div>
</div>
</div>
game.js：
app.directive('game',function(){
return{
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/game.html'
}
}
);
1 個解決方案
解決方案1
0 2015-11-25 16:18:51
是的，你可以。 但是你最好不要。
干凈的代碼既簡單又直接。 干凈的代碼讀起來像寫得很好的散文。
---- Grady Booch，《面向對象的分析和應用程序設計》一書的作者
這是使代碼干凈 ， 美觀和可重用的問題 。
確實，假設您需要在10個不同的頁面上顯示該重復列表。 復制這22行將是一個非常非常非常糟糕的主意。
如果您只將它放在一個地方，那么，您可能希望將其保留為ng-repeat ，但很可能要重用它，因此無論如何您都必須重構 。
我認為這對您閱讀鮑勃·馬丁（Bob Martin）的書或查看他的視頻可能很有用，真棒。
干杯!
Angular.js中的過濾指令
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.