AngularJS 组件:使用 = 绑定传递参数

MSK*_*MSK 3 angularjs

我正在尝试将参数传递给 AngularJS 组件(Angular 1.5)。但是,我无法在组件中访问它们。谁能告诉我代码有什么问题?

http://jsbin.com/fopuxizetu/edit?html,js,output

小智 5

在第一个片段中,我将绑定替换为 ,@以便它接受值。如果您使用=绑定,它希望您传入变量。

在第二个片段中,我使用了=绑定,但使用ng-int.

    angular
        .module('client', [])
        .component('testComponent', {
            template: '<h1>{{$ctrl.param}}</h1>',
            controller: function() {
                // this.param = '123';
            },
            bindings: {
                param: '@'
            }
        })
        .component('heroDetail', {
            template: '<span>Name: {{$ctrl.hero}}</span>',
            controller: function() {},
            bindings: {
                hero: '@'
            }
        });
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>AngularJS Example</title>

    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>


</head>
<body>

<div ng-app="client">
    Test
    <test-component param = "Test123">  </test-component>
    <hero-detail hero="Superman"></hero-detail>
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

使用 = 绑定的代码段。

    angular
        .module('client', [])
        .component('testComponent', {
            template: '<h1>{{$ctrl.param}}</h1>',
            controller: function() {
                // this.param = '123';
            },
            bindings: {
                param: '='
            }
        })
        .component('heroDetail', {
            template: '<span>Name: {{$ctrl.hero}}</span>',
            controller: function() {},
            bindings: {
                hero: '='
            }
        });
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>AngularJS Example</title>

    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

</head>
<body>

<div ng-app="client" ng-init="testParam= 'Test123'; testHero='Superman'">
    Test
    <test-component param = "testParam">  </test-component>
    <hero-detail hero="testHero"></hero-detail>
</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)