我想要一个 AngularJS 组件，messageDisplay它可以接受一个属性message（就像在 index.html 文件中它的 HTML 标签上的一个属性），然后显示它。根据我能找到的所有示例代码，这应该有效，但它不起作用。
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular sandbox</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
<script src="components/message-display.component.js"></script>
</head>
<body ng-app="app">
<message-display message="Hi"></message-display>
</body>
</html>
应用程序.js
const app = angular.module("app", []);
消息display.component.js
app.component(
"messageDisplay",
{
bindings: {
message: "<"
},
template: "<h1>Message: {{$ctrl.message}}</h1>"
}
)
我只得到一个带有文本“消息：”的页面，没有别的。我希望得到“消息：嗨”。
要将字符串传递给单向 ( "<") 绑定，请使用单引号：
<message-display message="'Hi'"></message-display>
否则它将被评估为一个 AngularJS 表达式，例如 $scope.Hi
angular.module("app",[])
.component(
"messageDisplay",
{
bindings: {
message: "<"
},
template: "<h1>Message: {{$ctrl.message}}</h1>"
}
)<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<message-display message="'Hi'"></message-display>
</body>你会推荐我在哪里学习这些东西？整个“绑定”概念和这些神秘的 <、&、=、@ 符号似乎没有包含在教程中
有关更多信息，请参阅
通常，我避免双向 ( "=") 绑定，因为它会使迁移到 Angular 2+ 更加困难。
"@"出于一致性原因，我还避免了属性 ( ) 绑定。我不需要记住哪些属性需要 AngularJS 表达式，哪些属性需要小胡子 ( {{ }})。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句