Связывание не работает между компонентами AngularJS - PullRequest
Новая
       30

Связывание не работает между компонентами AngularJS

0 голосов
/ 07 ноября 2018

У меня проблема с привязками в AngularJS. Я создал 2 компонента (leftForm и rightForm), эти компоненты имеют вход и элемент p. Этот p элемент представляет собой число, которое увеличивается при нажатии кнопки ввода другого компонента.

Например, я нажимаю leftButton (левый компонент), затем необходимо увеличить число счетчиков в правой кнопке (правый компонент), я выполнил это, но проблема в том, что я не вижу эти переменные в вид, так что я предполагаю, что я делаю что-то не так с привязкой. Вот мой код: 

angular.module('testApp', [])
    .controller('Controller', function ($rootScope) {
        var vm = this;
        $rootScope.valueLeft = 0;
        $rootScope.valueRight = 0;

        vm.rightButton = function () {
            $rootScope.valueLeft += 1;
        }

        vm.leftButton = function () {
            $rootScope.valueRight += 1;
        }

    })

    .component('leftForm', {
        templateUrl: 'leftForm.html',
        controller: 'Controller',
        controllerAs: 'vm',
        bindings: {
            onUpdate: '&'
        }
    })

    .component('rightForm', {
        templateUrl: 'rightForm.html',
        controller: 'Controller',
        controllerAs: 'vm',
        bindings: {
            onUpdate: '&'
        }
    });
<!doctype html>
<html ng-app="testApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body>
<div ng-controller="Controller as vm">
    <div class="container" style="text-align: center; padding-top: 2%;">
        <div class="row" style="padding: 2%; border: 1px solid;">
            <div class="col">
                <left-form></left-form>
            </div>
            <div class="col"></div>
            <div class="col">
                <right-form></right-form>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/ng-template" id="leftForm.html">
    <p>{{$rootScope.valueLeft}}</p>
    <button ng-click="vm.leftButton()">+1</button>
</script>

<script type="text/ng-template" id="rightForm.html">
    <p>{{$rootScope.valueRight}}</p>
    <button ng-click="vm.rightButton()">+1</button>
</script>

</html>

1 Ответ

0 голосов
/ 07 ноября 2018

Для доступа к $rootScope переменным в ваших шаблонах вы можете просто использовать $root в качестве ссылки на $rootScope как {{$root.valueLeft}} и {{$root.valueRight}}. Вот рабочий пример: 

angular.module('testApp', [])
    .controller('Controller', function ($rootScope) {
        var vm = this;
        $rootScope.valueLeft = 0;
        $rootScope.valueRight = 0;

        vm.rightButton = function () {
            $rootScope.valueLeft += 1;
        }

        vm.leftButton = function () {
            $rootScope.valueRight += 1;
        }

    })

    .component('leftForm', {
        templateUrl: 'leftForm.html',
        controller: 'Controller',
        controllerAs: 'vm',
        bindings: {
            onUpdate: '&'
        }
    })

    .component('rightForm', {
        templateUrl: 'rightForm.html',
        controller: 'Controller',
        controllerAs: 'vm',
        bindings: {
            onUpdate: '&'
        }
    });
<html ng-app="testApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body>
<div ng-controller="Controller as vm">
    <div class="container" style="text-align: center; padding-top: 2%;">
        <div class="row" style="padding: 2%; border: 1px solid;">
            <div class="col">
                <left-form></left-form>
            </div>
            <div class="col"></div>
            <div class="col">
                <right-form></right-form>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/ng-template" id="leftForm.html">
    <p>{{$root.valueLeft}}</p>
    <button ng-click="vm.leftButton()">+1</button>
</script>

<script type="text/ng-template" id="rightForm.html">
    <p>{{$root.valueRight}}</p>
    <button ng-click="vm.rightButton()">+1</button>
</script>

</html>
...