AngularJS - передать значение из изолированной директивы scope в другой элемент

Есть ли способ передать логическое значение (dataLoading) из изолированной директивы scope в другой элемент, чтобы показать индикатор выполнения, когда данные загружаются во время операций входа?

index.html

<div class="progress-line" ng-show="dataLoading"></div>
<login-user email = "email" password = "password" show-nav-bar="showNavBar" recover-password="recoverPassword(email)" data-loading="dataLoading"></login-user>

login.component.js

angular
    .module('login')
    .directive('loginUser', [function() {
        return {
            scope: {
                email: '=email',
                password: '=password',
                showNavBar: '=showNavBar',
                dataLoading: '=dataLoading',
                recoverPassword: '&'
            },
            controller: 'LoginController',
            templateUrl: 'login/login.template.html',

        };
    }]);

login.controller.js

function recoverPassword(email) {
    console.log("recoverPassword email: " + email);
    $scope.dataLoading = true;
    authenticationService.recoverPassword(email, function (response) {
        console.log("Response success, status: " + angular.toJson(response.data.status) + " message: " + angular.toJson(response.data.message));
        $scope.message = response.data.message;
        $scope.dataLoading = false;
    });
}
0
источник поделиться
3 ответа

Обычно лучше использовать свои данные в одном направлении. Следовательно, владелец переменной dataLoading должен быть общим родителем двух компонентов.

Если логика этого логического элемента должна быть внутри user-login компонента user-login, вы можете передать ему обратный вызов (через &), тогда компонент user-login вызовет его, когда он начнет извлекать данные, тогда родитель изменит значение который является логическим и распространяет его на соответствующих детей.

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

app.directive('parentComponent', function() {
    return {
      controllerAs: 'parentVM',
      controller: function() {
        this.isLoading = false;
        this.onLogin = () => {
          this.isLoading = true;
        }
      },
      template: '<div><child on-login="parentVM.onLogin()"></child><other-child is-loading="parentVM.isLoading"></other-child></div>'
    };
  })
  .directive('otherChild', function() {
    return {
      scope: {
        localLoading: '=isLoading'
      },
      template: '<div ng-class="{\'is-loading\':localLoading}">{{localLoading? \'Loading...\': \'\'}}</div>'
    }
  })
  .directive('child', function() {
    return {
      scope: {
        onLogin: '&'
      },
      template: '<button ng-click="onLogin()">Login</button>'
    };
  })
.is-loading {
  background-color: rgba(0, 200, 0, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

<div ng-app="app">
  <parent-component></parent-component>
</div>
+1
источник

Вы можете использовать EventEmitter для отправки данных на ваш контроллер.

EventEmitter({loading: true })

Добавьте привязку к вашему компоненту, чтобы уловить изменения:

onDataChanges: '&'

И вы поймаете свои данные на компонентном контроллере:

callbackdata(data) {
    this.loading= data.loading;
}

И ваше мнение:

<login ... onDataChanges="callbackdata($event)" ...></login>
0
источник

Да, конечно. Вы можете создать сервис, который предоставляет свойство "загрузить", а затем ввести службу как вашему контроллеру, так и вашей директиве. Внутри вашей директивы задано свойство "loading" вашего сервиса. Это все для вашей директивы. Теперь добавьте тот же сервис, который вы ввели в свою директиву для своего контроллера для элемента. Поэтому, если служба была вызвана myloadingservice, вы бы сделали что-то вроде $ scope.myloadingservice = myloadingservice. Как только у вас есть, вы можете привязать непосредственно к свойству загрузки вашего сервиса в своем элементе, например: ng-show = "myloadingservice.loading"

Надеюсь это поможет.

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос