Я использую директиву 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
ничего не меняет.
Так как я могу сделать эту работу с меню в другом файле?
Вы пытались заменить <div ng-include="menu.html"></div>
на <div ng-include="'menu.html'"></div>
. Согласно https://docs.angularjs.org/api/ng/directive/ngInclude, вы должны обернуть строковые константы в одинарные кавычки.
Я настоятельно рекомендую вам не использовать 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>
Такой подход дает вам больше энергии. Вся логика находится внутри контроллера директивы, и вы можете повторно использовать этот элемент каждый раз. Атрибут области проверки - это "мост" между вашим основным шаблоном, если изменение снаружи также изменяется внутри, а также другим способом.