3
を動作しない角度でスライディングメニューはじめ
ねえみんな、 だからこれは私の問題を持っている1で2です。私は何が起こっているの私の人生のために把握することはできません。私はちょうどプロバイダがあなたを気にしていることを発見しました。
問題は、私は、モバイルアプリのナビゲーション機能として作成されたスライダーのメニューを持っています。メニューはうまく生成され、コンパイルされて表示されます。私は最初のカップルのリンクをフリックし、バックドロップを押して閉じることができますが、最後のリンクをクリックすると、まったく閉じません。それは応答しません。私はアプリを再起動する必要があります、私はインスペクタを開いて、それはエラーを表示していません。だから私は、テンプレートが台無しであると仮定している、何もテンプレートに間違っている。プロバイダのソースコードは大丈夫だと思われますが、注文に関する問題がありますか？
次に。私はmenuInstance変数を必要なすべての領域に渡していますが、自己クローズ機能を設定しようとしていますが、認識されていません。だから、これらのすべてが一緒に潜在的に本当にクールな機能のために作られたが、悲しいかな、開こうとする以外は何も正しく働いていない。
私はそれがインスタンスであることを認識するために、どうすれば自分のコントローラーの中からコマンドのウィンドウを閉じることができるのですか？そして、最後にリンクがプッシュされた後に自分自身を認識しません。あなたが行動を見ることができるように、ここで
は、メニューのフィドルです：
https://jsfiddle.net/Mr_Pikachu/4brubsst/49/
現在のソースコード（厳格なモード）
/**
* Angular Slider Menu Widget
*/
// generate initial module and child modules
angular.module('sw.js.widget.slidermenu', ['ngAnimate', 'ngRoute']);
angular.module('sw.js.widget.slidermenu').directive('menuOverlayBackdrop', MenuOverlayBackdropDirective);
angular.module('sw.js.widget.slidermenu').directive('menuSlideCall', MenuSlideCallDirective);
angular.module('sw.js.widget.slidermenu').factory('$sliderMenuStack', SliderMenuStackFactory);
angular.module('sw.js.widget.slidermenu').provider('$sliderMenu', SliderMenuProvider);
// inject dependecies for each module as needed
MenuOverlayBackdropDirective.$inject = ['$sliderMenuStack'];
SliderMenuStackFactory.$inject = ['$document', '$compile', '$animate', '$rootScope'];
// create module functions
function MenuOverlayBackdropDirective($sliderMenuStack){
return {
compile : function(element, attrs){
element.addClass('widget-show');
return linkFn;
}
};
function linkFn(scope, element, attr){
scope.$on($sliderMenuStack.MENU_CLOSING, function(){
var instance = $sliderMenuStack.get();
instance.close(instance);
});
}
}
function MenuSlideCallDirective(){
return {
templateUrl : function(elem, attrs){
return attrs.templateUrl;
},
compile : function(element, attrs){
element.addClass('slide-left');
}
};
}
function SliderMenuStackFactory($document, $compile, $animate, $rootScope){
$menuStack = {
'MENU_CLOSING' : 'closing',
'MENU_CLOSED' : 'closed',
'instance' : null,
'menu' : null,
'open': function(menuInstance, menu) {
//console.log(menuInstance, menu);
//menuOpts.scope.main = menuOpts.menu.main;
var appendToEl = menu.appendTo;
var backdropEl = angular.element("<div class='widget-backdrop' menu-overlay-backdrop></div>");
var backdropScope = $rootScope.$new();
backdropEl.bind('click', function(){
backdropScope.$broadcast($menuStack.MENU_CLOSING);
});
var menuEl = angular.element("<div class='slider-menu-container' menu-slide-call template-url="+menu.template+"></div>");
menuInstance.backdropEl = backdropEl;
menuInstance.menuEl = menuEl;
menuInstance.scope = menu.scope;
menu.scope.close = menuInstance.close;
$menuStack.set(menuInstance);
$compile(menuEl)(menu.scope);
$compile(backdropEl)(backdropScope);
$animate.enter(backdropEl, appendToEl).then(function(){
$animate.enter(menuEl, appendToEl);
});
},
'close' : function(menuInstance){
menuInstance.scope.$apply(function(){
$animate.leave(menuInstance.menuEl).then(function(){
menuInstance.backdropEl.remove();
menuInstance = null;
$menuStack.set(menuInstance);
});
});
},
'set' : function(instance){
$menuStack.instance = instance;
},
'get' : function(){
return $menuStack.instance;
},
'remove' : function(){
$menuStack.instance = null;
}
};
return $menuStack;
}
function SliderMenuProvider(){
$menuProvider = {};
$menuProvider.options = {
background : true
};
$menuProvider.$get = ['$sliderMenuStack', '$q', '$rootScope', '$controller', '$document', function($sliderMenuStack, $q, $rootScope, $controller, $document){
return {
open : function(menuOptions){
var menu = {};
// preparing a new instance of the menu to be injected
var menuInstance = {
close : function(){
$sliderMenuStack.close(menuInstance);
}
};
menuOptions = angular.extend({}, $menuProvider.options, menuOptions);
var providedScope = menuOptions.scope || $rootScope;
menuScope = providedScope.$new();
// menuScope.$close = menuInstance.close();
menu.scope = menuScope;
menu.appendTo = $document.find('body').eq(0);
menu.template = menuOptions.templateUrl;
// generate the controller and then create an instance of the controller to be used
var ctrlInstantiate = $controller(menuOptions.controller, {$scope : menuScope}).constructor;
$sliderMenuStack.open(menuInstance, menu);
}
};
}];
return $menuProvider;
}
ここに私のページテンプレートですロードしようとしています：
<main class='container-fluid'>
<div class='row'>
<section class='col-xs-12'>
<ul class='list-group headed-list-group'>
<ng-repeat ng-repeat='(k, track) in tracks'>
<li class='list-group-item list-group-heading'>{{k}}</li>
<li class='list-group-item title clearfix' ng-repeat="t in track">
<div class='col-xs-2'></div>
<div class='col-xs-8'>
<table class='track-table'>
<tr><td class='track-title'>{{t.name}}</td></tr>
<tr><td class='track-cat'>{{t.subtitle}}</td></tr>
<tr><td class='track-stats'></td></tr>
</table>
</div>
<div class='col-xs-2'>
<p class='text-center form-control-static text-right'>
<!--<i class='fa fa-ellipsis-v' downloads-drawer></i>-->
</p>
</div>
</li>
</ng-repeat>
</ul>
</section>
</div>
</main>
これは、私が行きたい方向に誰かを指してくれることを願っています。それ以上のソースコードが必要な場合やエラーに関する情報が必要な場合は、すぐにコメントしてください。私はこれをできるだけ早く把握しようとしています。私は数日間悩まされていて、すぐ次の問題に移りたいと思います。早めにありがとう！