编译模板时出现代码气味

Code smell in compiling the template

本文关键字：代码 编译      更新时间：2023-09-26

在下面的代码中，

<!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值。通过将值传递给指令的players属性，可以去掉父控制器的控制器别名。

标记

<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.
    }
  }
});
相关文章：