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.