演示

Question

我想要一个AngularJS组件messageDisplay，该组件可以带有属性message（例如，只是index.html文件中HTML标签的属性），然后显示那。根据我已经找到的所有示例代码，这应该可以，但是不起作用。

index.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>

app.js

const app = angular.module("app", []);

message-display.component.js

app.component(
        "messageDisplay",
        {
            bindings: {
                message: "<"
            },
            template: "<h1>Message: {{$ctrl.message}}</h1>"
        }
    )

我只得到了一个带有文本“ Message：”的页面，仅此而已。我希望收到“消息：您好”。

Answer 1

嘿绑定应该是'@'，使用这个：-

app.component(
        "messageDisplay",
        {
            bindings: {
                message: "@"
            },
            template: "<h1>Message: {{$ctrl.message}}</h1>"
        }
    )

Answer 2

< 单向绑定：-当我们只想读取参数时来自父范围而不更新它。
@用于字符串参数

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/

Answer 3

要将字符串传递到单向（"<"）绑定，请使用单引号：

<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表达式，哪些属性需要胡须（{{ }}）。

为什么我无法通过绑定将数据获取到AngularJS组件？

3 个答案:

演示

更新