Не могу передать константу javascript через ng-if

Question

Я использую несколько глобальных констант javascript для обмена информацией о состоянии между контроллерами на моей странице. Возможно, это плохая идея, но она помогает мне сократить количество ошибок при печати и централизует место, где я придумываю эти имена, в одном месте в моем коде.

Различные части моей страницы в разных контроллерах предназначены для отображения или скрытия в зависимости от этих глобальных состояний. Итак, у меня есть одно состояние, которое определено

const DISPLAY_STATE_CHART = "showChart";

и родительская область нескольких заинтересованных контроллеров может запрашивать карту, поддерживаемую этой родительской областью. Карта может быть запрошена ключом, который, основываясь на этих константах состояния, вроде:

 state = $scope.$parent.displayStateMap.get(DISPLAY_STATE_CHART);

состояние - логическое значение, которое используется для определения, должен ли отображаться div или нет.

Итак, на моей странице я хочу отобразить div, если «состояние» истинно, Я включаю нг-если:

<div ng-if="getDisplayState(DISPLAY_STATE_CHART)">some content</div>

В моем контроллере у меня есть функция, определенная как:

$scope.getDisplayState(when_display_state) {
    return $scope.$parent.displayStateMap(when_display_state);
 }

Однако константное имя, закодированное в HTML, каким-то образом не проходит, и когда__дисплей_state представляется как «неопределенное».

Если я изменю HTML, чтобы использовать строковое значение, например

 <div ng-if="getDisplayState('showChart')">some content</div>

это работает, как и ожидалось, поэтому очевидно, что проблема в том, что любая часть Angular интерпретирует html-строку, присоединенную к ng-if, каким-то образом не знает об этих глобальных константах.

Есть ли решение для этого?

Спасибо.

Answer 1

Вы не можете использовать переменные, определенные с const внутри ng-if. Внутри ng-if вы можете использовать только те переменные, которые определены в $scope определенного шаблона.

См. этот SO-ответ , который является ответом на проблему, аналогичную вашей.

Но я могу предложить вам обходной путь, если вам не нравится перемещать значение определенного значения const в переменную области видимости, если вы не против установить свои элементы DOM с помощью javascript.

Изменить эту строку: <div ng-if="getDisplayState(DISPLAY_STATE_CHART)">some content</div> следующим образом: <div id="displayState"></div>.

А внутри вашего javascript запустите функцию onload окна браузера, которая проверит наличие DISPLAY_STATE_CHART с помощью функции $scope.getDisplayState(). Точно так же, как вы будете отображать содержимое div на основе его значения, просто установите значение div внутри самого javascript, когда условие выполнено, что-то вроде:

  function run() {
    if ($scope.getDisplayState(DISPLAY_STATE_CHART)) {
      document.getElementById("displayState").innerHTML = "some content";
    }
  }
  window.onload = function() {
      run();
  }

Я создал исполняемый скрипт (только с примерами значений). Просто для лучшего понимания.

var app = angular.module('constApp', []);
app.controller('constCtrl', function($scope) {

  const DISPLAY_STATE_CHART = true;

  $scope.getDisplayState = function(dsc) {
    return dsc;
  }

  function run() {
    if ($scope.getDisplayState(DISPLAY_STATE_CHART)) {
      document.getElementById("displayState").innerHTML = "some content";
    }
  }
  window.onload = function() {
      run();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="constApp" ng-controller="constCtrl">
  <div id="displayState"></div>
</div>