Директива для внешнего вида не работает

0

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

Это обычный способ сделать это, и его работа:

<div class="navbar-header">
  <span ng-controller="slideController as s">
    <a class="navbar-brand" href="javascript:void(0)"
       ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
          <div pageslide ps-open="s.isActive" ps-side="left">
            <div style="padding:20px">
              <h2>Hello Pageslide</h2>
              <p>Put here whatever I want in the lateral menu</p>
              <a ng-click="s.toggle()" class="button" >Close</a>
            </div>
          </div>
  </span>
  <a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>

Но я хотел бы сделать содержимое меню во внешнем шаблоне, поэтому я пробую это:

<div class="navbar-header">
  <span ng-controller="slideController as s">
    <a class="navbar-brand" href="javascript:void(0)"
       ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
    <menu-item isActive="s.isActive"></menu-item>
  </span>
  <a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>

с этим как menu.html:

<div pageslide ps-open="s.isActive" ps-side="left">
  <div style="padding:20px">
    <h2>Hello Pageslide</h2>
    <p>Put here whatever I want in the lateral menu</p>
    <a ng-click="s.toggle()" class="button" >Close</a>
  </div>
</div>

также, вот связанный контроллер:

'use strict';

angular.module('BalrogApp').controller('slideController', function(){

  this.isActive= false; // This will be binded using the ps-open attribute

  this.toggle = function(){
    this.isActive= !this.isActive
  }

});

и директивой <menu-item>:

angular.module('BalrogApp').directive('menuItem', function () {
  return {
    restrict: 'E',
    templateUrl: "views/menu.html",
    scope: {
      isActive: '='
    },
    controller: 'slideController',
    controllerAs: 's',
    bindToController: true
  }
});

Так что это не работает, возможно, это потому, что основной вид (включая <menu-item >) сам включен в основную страницу благодаря <ng-view>?

Или, может быть, pageslide-directive требует, чтобы <div pageslide...> и ее родительский элемент находились в одном файле?

Я могу сказать с консоли, что toggle() вызывается и в обоих случаях изменяется isActive но он не открывает меню с директивной версией.

А также добавление ng-controller="slideController as s" к корневому <div> pageslide ничего не меняет.

Так как я могу сделать эту работу с меню в другом файле?

  • 1
    лично я ненавижу ng-include ... я предпочитаю создавать директиву ... изменить ng-include на директиву, поскольку вы пытаетесь манипулировать DOM .... если вам нужна дополнительная помощь, добавьте плунжер
  • 0
    какую угловую версию вы используете?
Показать ещё 1 комментарий
Теги:
model-view-controller
angularjs-directive

2 ответа

1

Вы пытались заменить <div ng-include="menu.html"></div> на <div ng-include="'menu.html'"></div>. Согласно https://docs.angularjs.org/api/ng/directive/ngInclude, вы должны обернуть строковые константы в одинарные кавычки.

  • 0
    правильно, все еще нг-включить соски ... пользовательские директивы гораздо более последовательны и являются лучшим выбором
  • 0
    Нет, добавление кавычек не исправило это. Я собираюсь попробовать с директивой как предложено все же.
Показать ещё 1 комментарий
0

Я настоятельно рекомендую вам не использовать ng-include. Вместо этого вы можете использовать тот же подход, используя директиву.

Например:

Меню html

<div pageslide ps-open="vm.checked" ps-side="left">
  <div style="padding:20px">
    <h2>Hello Pageslide</h2>
    <p>Put here whatever I want in the lateral menu</p>
    <a ng-click="vm.toggle()" class="button" >Close</a>
  </div>
</div>

Директива:

function Controller() {
}

Controller.prototype.toggle = function() {
  this.checked = !this.checked;
}

angular
  .module('BalrogApp')
  .directive('menuItem', function() {
    return {
      templateUrl: 'urltomenu.html',
      restrict: 'E',
      scope: {
        checked: '='
      },
      controller: Controller,
      controllerAs: 'vm',
      bindToController: true
    }
  })

Основной шаблон

<div class="navbar-header">
  <span ng-controller="slideController as s">
    <a class="navbar-brand" href="javascript:void(0)"
       ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
    <menu-item checked="s.checked"><menu-item>
  </span>
  <a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>

Такой подход дает вам больше энергии. Вся логика находится внутри контроллера директивы, и вы можете повторно использовать этот элемент каждый раз. Атрибут области проверки - это "мост" между вашим основным шаблоном, если изменение снаружи также изменяется внутри, а также другим способом.

  • 0
    Спасибо за ваш ответ, я попробовал это таким образом, но он тоже не работает, я обновил первоначальный пост с этим подходом и опубликовал больше информации. Любая идея, что не так?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню