Javascript 编译模板时的代码气味_Javascript_Angularjs_Angularjs Directive

Javascript 编译模板时的代码气味

javascript angularjs

Javascript 编译模板时的代码气味,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,在下面的代码中 <!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-cloa

在下面的代码中

<!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>

我们在定制指令中明确使用

o.players

如何解决此代码气味？

请使用指令的

模板

选项来加载html，并使用独立的作用域并使用

从指令属性传递

值（双向绑定）。通过将值传递给指令的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.
    }
  }
});

指令（“getPlayerInfo”，函数（$compile）{
返回{
模板：“{{player.name}”，
范围：{
玩家：'='
},
链接：函数（范围、元素、属性）{
//从这里操作DOM。
}
}
});

请使用指令的

模板

选项来加载html，并使用隔离作用域并使用

从指令属性传递

值（双向绑定）。通过将值传递给指令的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.
    }
  }
});

指令（“getPlayerInfo”，函数（$compile）{
返回{
模板：“{{player.name}”，
范围：{
玩家：'='
},
链接：函数（范围、元素、属性）{
//从这里操作DOM。
}
}
});