Блог

Главная - Вопросы по программированию - Привязка AngularJS attr от родительского к дочернему компоненту не работает

Привязка AngularJS attr от родительского к дочернему компоненту не работает

#angularjs

#angularjs

Вопрос:

Я создал простое приложение с одним модулем в AngularJS. тело завернуто в контроллер, и этот контроллер извлекает фиктивные данные из jsonplaceholder (массив пользователей). Я также создал компонент и подключил его к тому же контроллеру с именем <my-comp> и с помощью привязки attr я пытаюсь передать массив объектов, который я получаю от http-вызова, однако он выдает следующую ошибку:

Ошибка angular.js:15697: [$parse:синтаксис] http://errors.angularjs.org/1.8.2/$parse/syntax?p0={amp;p1=invalid keyamp;p2=2amp;p3={{users}}amp;p4={users}}

Можете ли вы помочь мне найти, где я совершаю ошибку? Я оставлю (не) рабочий фрагмент.

 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>

Спасибо.

Комментарии:

1. Похоже, вы не анализируете ответ. Прежде чем назначить response.data, выполните JSON.parse(response.data)

Ответ №1:

{{...}} означает вычисление выражения внутри него. Чтобы передать переменную, например, в случае вашей 2-сторонней привязки ( attr1: '=' ), вам просто нужно сделать attr1="users" .

Ваш фрагмент кода, в котором вы используете компонент, будет выглядеть следующим образом:

 <body ng-controller="controlador">

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

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