AngularJS fallback, скрыть для всех пользователей javascript

Я знаю о скрипте-теге для добавления контента, который никто из пользователей javascript не может прочитать.

Как лучше всего скрыть html-блоки, созданные для angularjs?

Пример: 

<div>
{{this_code_is_converted_to_angular_js_code_when_javascript_is_active}}
</div>

Строка выше не так красива для пользователя none javascript. Как лучше всего удалить его, если пользователь не использует javascript?

4 3
javascript angularjs html fallback

4 ответа:

Если вы просто хотите скрыть элементы, вы можете использовать ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak

2

Используйте тег <noscript> для отображения содержимого, еслиJavaScript не включен.

Также файл main.html не должен иметь никаких тегов {{content}}, вместо этого вы должны иметь вложенные представления, которые загружаются в <div ng-view=""></div>

Таким образом, если JavaScript не включен, будет отображаться только содержимое в теге noscript, поскольку ng-view div пусто, так как AngularJS является JavaScript и никогда ничего не вставит в ng-view div.

Пример HTML 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="css/app.css"/>
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>
  <noscript>Enable JavaScript to view this web page.</noscript>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>
8

У вас есть несколько вариантов...

Поскольку вы специально не хотите отображать HTML-блок для НЕУГЛОВЫХ (не javascript), то вам следует поместить этот HTML-код только в одно из следующих значений:

  • Использовать ngBindTemplate (предпочтительно): 

    <script>
  function Ctrl($scope) {
    $scope.salutation = 'Hello';
    $scope.name = 'World';
  }
</script>
<div ng-controller="Ctrl">
 Salutation: <input type="text" ng-model="salutation"><br>
 Name: <input type="text" ng-model="name"><br>
 <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>

  • Или... ngBind: 

    <script>
  function Ctrl($scope) {
    $scope.name = 'Whirled';
  }
</script>
<div ng-controller="Ctrl">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>
    Главное отличие состоит в том, что"...в отличие от ngBind, ngBindTemplate может содержать несколько выражений {{ }}. Эта директива необходима, так как некоторые HTML-элементы (такие как TITLE и OPTION) не может содержать SPAN элементов.": https://docs.angularjs.org/api/ng/directive/ngBindTemplate

    В вашем конкретном примере / вопросе: 

     <div ng-bind="hide-this-when-no-js">
   {{this_code_is_converted_to_angular_js_code_when_javascript_is_active}}
 </div>
1

Я не знаю, если это то, что вы ищете, но если вы не хотите отображать {{ }} метки на Вашей странице, когда javascript не включен, вы должны попробовать использовать ng-bind и/или ng-bind-template вместо этого.

0