Question

这里是AngularJS的新手。经过＆gt; = 3小时的努力，我似乎无法使我的自定义指令正常工作，即使我完全掌握了我想要做的事情，并且通常理解如何创建和包含自定义指令。 HTML文件应该发生。

我的问题：如何让自定义指令中的表达式成功显示在页面上？

文件如下。非常感谢您的帮助！提前谢谢。

的index.html

<html ng-app="favoritePlayers">
  <head>
    <meta charset="utf-8">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
    <link rel="stylesheet" type="text/css" href="css/custom.css" />

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <title>My Favorite Players</title>
  </head>

  <body>
    <!-- Expression within controller -->
    <section ng-controller="NFLController as nfl">
        <h1>why does this work?</h1>
        <div ng-repeat="team in nfl.teams">
            <h3> {{team.qb}}</h3>
        </div>
    </section>
    <br>
    <br>
    <!-- Using a custom directive instead -->
    <section ng-controller="NFLController as nfl">
        <h1>...but this doesn't?</h1>
        <div ng-repeat="team in nfl.teams">
            <running-backs></running-backs>
        </div>
    </section>
  </body>
</html>

app.js

(function(){

var app = angular.module("favoritePlayers", []);

app.controller("NFLController", function(){
    this.teams = league;
});

app.directive('runningBacks', function(){
     return {
        restrict: 'E',
        templateUrl: 'running-backs.html',
        //controller:
        //controllerAs: 
    };
});

var league = [
    {
        teamName: "Philadelphia Eagles",
        qb: "Mark Sanchez",
        rb: "LeSean McCoy",
        wr: "Jeremy Maclin",
        superbowl_contender: true
    },
    {
        teamName: "Dallas Cowboys",
        qb: "Tony Romo",
        rb: "Demarco Murray",
        wr: "Dez Bryant",
        superbowl_contender: true
    },
    {
        teamName: "New York Giants",
        qb: "Eli Manning",
        rb: "Rashad Jennings",
        wr: "Odell Beckham Jr.",
        superbowl_contender: false
    },      
    {
        teamName: "Washington Redskins",
        qb: "Robert Griffin III",
        rb: "Alfred Morris",
        wr: "Desean Jackson",
        superbowl_contender: false
    },
];
})();

运行-backs.html

<h3> yo {{team.rb}} </h3>

Answer 1

我认为您的代码确实有效，当我尝试它时running-backs.html似乎没有加载 - 您是从网络服务器还是本地文件系统运行的？如果我使用<script type="text/ng-template" id="running-backs.html">而不是从外部文件加载，那么它就像我期望的那样运行。

＆＃13;

(function(){

var app = angular.module("favoritePlayers", []);

app.controller("NFLController", function(){
    this.teams = league;
});

app.directive('runningBacks', function(){
     return {
        restrict: 'E',
        templateUrl: 'running-backs.html',
        //controller:
        //controllerAs: 
    };
});

var league = [
    {
        teamName: "Philadelphia Eagles",
        qb: "Mark Sanchez",
        rb: "LeSean McCoy",
        wr: "Jeremy Maclin",
        superbowl_contender: true
    },
    {
        teamName: "Dallas Cowboys",
        qb: "Tony Romo",
        rb: "Demarco Murray",
        wr: "Dez Bryant",
        superbowl_contender: true
    },
    {
        teamName: "New York Giants",
        qb: "Eli Manning",
        rb: "Rashad Jennings",
        wr: "Odell Beckham Jr.",
        superbowl_contender: false
    },      
    {
        teamName: "Washington Redskins",
        qb: "Robert Griffin III",
        rb: "Alfred Morris",
        wr: "Desean Jackson",
        superbowl_contender: false
    },
];
})();

＆＃13;

<html ng-app="favoritePlayers">
  <head>
    <meta charset="utf-8">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
    <link rel="stylesheet" type="text/css" href="css/custom.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <title>My Favorite Players</title>
  </head>

  <body>
    <!-- Expression within controller -->
    <section ng-controller="NFLController as nfl">
        <h1>why does this work?</h1>
        <div ng-repeat="team in nfl.teams">
            <h3> {{team.qb}}</h3>
        </div>
    </section>

    <br>
    <br>
    <!-- Using a custom directive instead -->
    <section ng-controller="NFLController as nfl">
        <h1>...but this doesn't?</h1>
        <div ng-repeat="team in nfl.teams">
            <running-backs></running-backs>
        </div>
    </section>
    
    <script type="text/ng-template" id="running-backs.html">
    <h3> yo {{team.rb}} </h3>
    </script>
  </body>
</html>

＆＃13;

Answer 2

我怀疑这是一个范围问题。最好的方法是在你的指令中create an isolate scope：

app.directive('runningBacks', function(){
     return {
        restrict: 'E',
        templateUrl: 'running-backs.html',
        scope: { team: '=teamName' } // sets local `team` equal to the value 
                                     // of the `team-name` attribute
    };
});

视图：

    <div ng-repeat="team in nfl.teams">
        <running-backs team-name="team"></running-backs>
    </div>

完整示例：

var app = angular.module("favoritePlayers", []);

app.controller("NFLController", function() {
  this.teams = league;
});

app.directive('runningBacks', function() {
  return {
    restrict: 'E',
    templateUrl: 'running-backs.html',
    scope: {
      team: '=teamName'
    }
  };
});

var league = [{
  teamName: "Philadelphia Eagles",
  qb: "Mark Sanchez",
  rb: "LeSean McCoy",
  wr: "Jeremy Maclin",
  superbowl_contender: true
}, {
  teamName: "Dallas Cowboys",
  qb: "Tony Romo",
  rb: "Demarco Murray",
  wr: "Dez Bryant",
  superbowl_contender: true
}, {
  teamName: "New York Giants",
  qb: "Eli Manning",
  rb: "Rashad Jennings",
  wr: "Odell Beckham Jr.",
  superbowl_contender: false
}, {
  teamName: "Washington Redskins",
  qb: "Robert Griffin III",
  rb: "Alfred Morris",
  wr: "Desean Jackson",
  superbowl_contender: false
}, ];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="favoritePlayers">
  <!-- Using a custom directive instead -->
  <section ng-controller="NFLController as nfl">
    <div ng-repeat="team in nfl.teams">
      <running-backs team-name="team"></running-backs>
    </div>
  </section>

  <script type="text/ng-template" id="running-backs.html">
    <h3> yo {{team.rb}} </h3>
  </script>
</div>

AngularJS - 自定义指令无法正常工作

2 个答案: