AngularJS 从父组件到子组件的 attr 绑定不起作用

Question

我在 AngularJS 中创建了一个简单的单模块应用程序。主体包裹在一个控制器中，该控制器从 jsonplaceholder（一组用户）中获取虚拟数据。我还创建了一个组件并将其附加到同一个控制器，名为 <my-comp> 并使用 attr 绑定我试图传递从 http 调用接收到的对象数组，但是它抛出以下错误：

angular.js:15697 错误：[$parse:syntax] http://errors.angularjs.org/1.8.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Busers%7D%7D&p4=%7Busers%7D%7D

你能帮我找出我哪里出错了吗？我会留下一个（不是）工作片段。

angular.module('mainApp', [])
    .controller("controlador", function($q, $http, $scope) {
        $scope.users = [];

        $http({
            method: 'GET',
            url: 'https://jsonplaceholder.typicode.com/users'
        }).then(function successCallback(response) {
            console.log('response', response.data)
            $scope.users = response.data;

        }, function errorCallback(response) {
            console.log('response', response)
        })
    })

.component("myComp", {
    bindings: { attr1: '=' },
    controllerAs: "modelo",
    template: '<p ng-repeat="user in attr1">{{user.name}}</p>'
})

<!DOCTYPE html>
<html ng-app="mainApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>components binding symbols</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous"></script>
</head>

<body ng-controller="controlador">

    <my-comp attr1="{{users}}"></my-comp>

    <script src="app.js"></script>
</body>

</html>

谢谢。

Answer 1

{{...}} 表示计算里面的表达式。要传递变量，例如在您的 2 路绑定 (attr1: '=') 的情况下，您只需要执行 attr1="users".

您使用该组件的代码段将如下所示：

<body ng-controller="controlador">

    <my-comp attr1="users"></my-comp>

    <script src="app.js"></script>
</body>

AngularJS 从父组件到子组件的 attr 绑定不起作用

AngularJS attr binding from parent to child component not working

angularjs