在下面的代码中，
<!DOCTYPE html>
<html ng-app="app14" ng-cloak>
<head>
<meta charset="UTF-8">
<title> Angular built-in services</title>
<style>
[ng\:cloak], [ng-cloak], .ng-cloak{
display: none;
}
</style>
</head>
<body>
<!-- Using $angular service-->
<p get-player-info></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-sanitize.js"></script>
<script type="text/javascript" src="js/exam14.js"></script>
</body>
</html>
var app14 = angular.module('app14', ['ngSanitize']);
function MainController($window, $location, $interval, $log, $exceptionHandler, $sanitize){
/***** For $compile service ********/
this.players = [
{name: "Barry Bonds", avg: 0.298, hr: 762, obp: 0.444},
{name: "Hank Aaron", avg: 0.305, hr: 755, obp: 0.374},
{name: "Babe Ruth", avg: 0.342, hr: 714, obp: 0.474},
{name: "Ted Williams", avg: 0.344, hr: 521, obp: 0.482}
];
}
app14.controller('mainCtrl', MainController);
/***** using $compile service ********/
app14.directive("getPlayerInfo", function($compile){
return function(scope, element, attrs){
var playerList ="<ul><li ng-repeat='player in o.players'>{{player.name}}</li></ul>";
var listElement = angular.element(playerList);
var compileFunction = $compile(listElement);
compileFunction(scope);
element.append(listElement);
}
});
getPlayerInfo 指令中存在代码味道(如下所示)
var playerList ="<ul><li ng-repeat='player in o.players'>{{player.name}}</li></ul>";
我们在自定义指令中明确使用o.players。
如何解决此代码异味？
最佳答案
请使用指令的 template 选项来加载 html，并使用隔离范围并使用 = 从指令属性传递 players 值(两个方式绑定(bind))。您只需将值传递给指令的 players 属性即可摆脱父 Controller 的 Controller 别名。
标记
<p get-player-info players="o.players"></p>
指令
app14.directive("getPlayerInfo", function($compile){
return {
template: '<ul><li ng-repeat='player in players'>{{player.name}}</li></ul>',
scope: {
players: '='
},
link: function(scope, element, attrs) {
//do manipulate DOM from here.
}
}
});
关于javascript - 编译模板时的代码味道，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36220575/