Как передать значение в html после загрузки в angularjs - PullRequest
Новая
       5

Как передать значение в html после загрузки в angularjs

0 голосов
/ 17 апреля 2020

Я пытаюсь передать логическое значение ng-hide в html после его загрузки.

Для большей ясности

Пример

test. html

<div ng-hide="vm.isValueTrue">
  <div class="col-xs-12 col-sm-12">
     enabled Networks
  </div>
</div>

test.controller. js

if(condition) {
  vm.isValueTrue = true;
} else vm.isValueTrue = false;

$rootScope.$on('makeTestValueFalse', function() {
vm.isValueTrue = false;

test.service. js

if(condition) {
$rootScope.$broadcast('makeTestValueFalse');
}

Из приведенного выше кода происходит именно то, что когда мое приложение загружается, test.html и загружается код из test.controller.js.

Допустим, условие if в test.controller. js выполнено и vm.isValueTrue выполнено. Таким образом, в этом случае html будет hide делением, используя ng-hide.

. И из-за некоторой операции над кодом будет запущено test.service.js и условие if в service.js будет удовлетворено, $rootScope.$broadcast сработает и $rootScope.$on будет вызвано для controller.js

Значение становится false , но html не может обновиться как html уже загружен. Я вижу, что могу сделать это с помощью $ scope, но не совсем ясно, как поступить в этом случае.

Нужна помощь и сообщите, если что-то не понятно.

1 Ответ

0 голосов
/ 17 апреля 2020

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

Нажмите кнопки, чтобы показать / скрыть div содержимое 

(function () {
    'use strict';

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

    angular.
        module('app')
        .service('myService', ['$rootScope', function ($rootScope) {
            return {
                forceTestValue: function (testValue) {
                    $rootScope.$broadcast('FORCE_TEST_VALUE', testValue)
                }
            }
        }])
        .controller('myController', ['$scope', 'myService', function ($scope, myService) {
            var vm = this;

            vm.testValue = false

            vm.forceTestValue = function (testValue) {
                myService.forceTestValue(testValue)
            }

            $scope.$on('FORCE_TEST_VALUE', function (event, testValue) {
                vm.testValue = testValue
            })
        }])

})();
<!DOCTYPE html>

<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="module.js"></script>
  </head>
  <body ng-controller="myController as vm">
    <button ng-click="vm.forceTestValue(true)">
      Force test value to <strong>true</strong>
    </button>
    <button ng-click="vm.forceTestValue(false)">
      Force test value to <strong>false</strong>
    </button>
    <div ng-if="vm.testValue === true">
      <div class="col-xs-12 col-sm-12">
        enabled Networks
      </div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...