AngularJS-自定义指令无法正常工作
[英]AngularJS — Custom Directive Won't Work Properly
问题描述
这里是AngularJS的新功能。 经过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>
2 个解决方案
解决方案1
0 2014-11-14 20:00:35
我认为您的代码确实有效，当我尝试running-backs.html它时，似乎还没有running-backs.html您是从网络服务器运行还是从本地文件系统运行？ 如果我使用<script type="text/ng-template" id="running-backs.html">而不是从外部文件加载，则它会按预期运行。
(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 }, ]; })();
<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>
解决方案2
0 2014-11-14 20:03:38
我怀疑这是一个范围界定问题。 最好的方法是在指令中创建隔离范围 ：
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 ng-include和angularjs自定义指令不希望一起工作
[英]angularjs ng-include and angularjs custom directive dont't want work together
AngularJS：从自定义指令中调用自定义指令似乎不起作用
[英]AngularJS: Calling custom directives from within a custom directive doesn't seem to work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.