Question

所以我在Angular.js上关注代码学院的教程。我理解每一步，这些都是显示简单游戏板的最终文件。我的问题是：为什么我们需要经历创建一个名为游戏的指令并将其链接到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'
  }
}
              );

Answer 1

是的，你可以。但你最好不要。

清洁代码简单直接。干净的代码读起来很好   散文。

---- Grady Booch，面向对象分析和应用程序设计的作者

让您的代码清洁，漂亮和可重复使用的问题。

实际上，假设您需要在10个不同页面上显示重复列表。对这22行进行复制将是very, very, very bad idea.

如果您只在一个地方使用它，那么您可能希望将其保留为ng-repeat，但您很可能会重复使用它，所以您将会不管怎么说都要重构。

我认为阅读一些鲍勃·马丁的书或查看his videos可能对你有用，但是很棒。

干杯！

在这个angular.js示例中创建指令的重点是什么？

1 个答案: