我想要一个 AngularJS 组件，messageDisplay，它可以message获取属性(例如，只是索引文件中其 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", []);
消息显示组件.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>更新
你会建议我在哪里学习这些东西？整个"绑定"概念和这些神秘的<，&，=，@符号似乎没有在教程中涵盖
有关更多信息，请参阅
- AngularJS 综合指令 API 参考 - 范围
- AngularJS 开发人员指南 - 基于组件的应用程序架构
一般来说，我避免双向("="(绑定，因为它使迁移到Angular 2+更加困难。
出于一致性原因，我也避免属性("@"(绑定。我不需要记住哪些属性采用 AngularJS 表达式，哪些属性需要胡须({{ }}(。
hey 绑定应该是 '@'，使用这个：-
app.component(
"messageDisplay",
{
bindings: {
message: "@"
},
template: "<h1>Message: {{$ctrl.message}}</h1>"
}
)
<单向绑定：- 当我们只想读取参数时 从父范围，而不是更新它。@这是针对字符串参数的
const app = angular.module("app", []);
app.component(
"messageDisplay",
{
bindings: {
message: "@"
},
template: "<h1>Message: {{$ctrl.message}}</h1>"
}
)<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
</head>
<body ng-app="app">
<message-display message="Hi"></message-display>
</body>
</html>
<!--
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at https://angular.io/license
-->模式详细信息博客 -> http://blog.krawaller.se/posts/dissecting-bindings-in-angularjs/