В нативных инструкциях Angular эти инструкции используются для контроля, отображаются ли элементы или нет, NG-Show/Ng-Hide/NG-IF и NG-Switch.
Мы также часто используем его при оптимизации угловой производительности.
Давайте посмотрим на их различия.
Среди них NG-SHOW и NG-HIDE одинаковы, за исключением того, что NG-SHOW отображает условия, когда они встречаются, и NG-Hide скрывает условия, когда они встречаются. Мы не будем упоминать ng-hide ниже.
NG-SHOW
Значение Bool, полученное NG-Show, будет запускается для отображения узла DOM, когда TRUE. Когда значение ng-show является ложным, класс Ng-Hide добавляется в узел DOM, а выражение этого класса-«Дисплей: нет». Когда DOM загружается, все узлы в NG-Show будут загружены. То есть NG-Show только скрывает и отображает узел DOM. Это означает, что если в инструкции NG-Sow слишком много масла, даже если они не отображают его, узел DOM, в котором они находятся, все равно будет отображаться.
Нг-IF
NG-IF также получает значение Bool. Когда его значение неверно, узел, который он управляет управлением, не создается, или предыдущий узел DOM будет уничтожен. Даже если этот узел содержит много связей NG, он не будет выполнен. Поэтому, в разработке проекта, если нам не нужно загружать DOM сразу, мы можем использовать NG-IF, чтобы предотвратить событие NG, что ускоряет скорость нагрузки DOM. Особенно при повторении эффект особенно очевиден, когда каждая часть данных содержит сложные структуры данных. Когда его значение верно, будет создан узел DOM.
Таким образом, если вы используете инструкции и шаблоны для отображения дополнительной информации, например, нажатие, чтобы отобразить подробную информацию элемента списка, обязательно используйте NG-IF (AngularJsv. 1.1.5 и позже). Он блокирует рендеринг (по сравнению с NG-Show).
NG-Switch
Существование NG-Switch спасает нас много проблем (следует сказать, что сама угловая такая). Например, мы использовали традиционный способ создания вкладки. Нам нужно снова и снова зацикливаться, а затем судить о текущем состоянии, а затем выполнять соответствующие вещи. Использование NG-Switch в угловом виде очень просто. NG-Switch должен сначала прослушать определенную переменную, и какой контент будет отображаться ниже, когда переменная будет оценена. Как показано выше, при прослушивании переменной, подобной типу, когда значение типа равно «AAA», эта область будет создана и отображается; Когда значение типа равно «BBB», все DOMS предыдущего «AAA» будут уничтожены, а затем будут созданы и отображаются все «BBB'Doms.
Пример http://jsbin.com/hinehi/1/edit