0
私は角度ブートストラップを使って簡単なモーダルを作成する方法について多くのチュートリアルを読んでいます。しかし、すべての例は、ルートプロバイダやその他の複雑なアーキテクチャパターンを使用しないシングルページアプリケーションに基づいているようです。 the code in this plnkrには、ルートプロバイダを使用するアプリケーションでコントローラ経由でモーダルサービスを呼び出すために具体的な変更が必要ですか？
1）は、2つの経路、/と/public1とルート・プロバイダ：ルートプロバイダのあるアプリでモーダルサービスを呼び出す方法は？
上記plnkrリンクの例では、持っているアプリです。
）navigationコントローラが目次を処理するため、任意の/両方のルートより上に位置します。
）modalServiceをコントローラに注入する。
）index.htmlには、navigationコントローラで管理されている目次のdivが含まれています。 index.htmlのナビゲーションdiv内のボタンはコントローラのdeleteCustomer()メソッドを呼び出すため、モーダルが表示されます。 ボタンをクリックしたときにモーダルが表示されるためには、どのような変更が必要ですか？私devboxで
私はアプリを起動しようとすると、FireFoxのデバッガは、次のコンパイルエラーを生成している：私はジッパーとしてplnkrをダウンロードすると
Error: [$injector:modulerr] Failed to instantiate module hello due to:
[$injector:modulerr] Failed to instantiate module navigation due to:
[$injector:modulerr] Failed to instantiate module modalService due to:
[$injector:nomod] Module 'modalService' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=modalService
minErr/<@http://localhost:9000/bower_components/angular/angular.js:68:12
module/<@http://localhost:9000/bower_components/angular/angular.js:2015:1
[email protected]://localhost:9000/bower_components/angular/angular.js:1939:38
[email protected]://localhost:9000/bower_components/angular/angular.js:2013:1
loadModules/<@http://localhost:9000/bower_components/angular/angular.js:4503:22
[email protected]://localhost:9000/bower_components/angular/angular.js:321:11
[email protected]://localhost:9000/bower_components/angular/angular.js:4
その後、私のdevboxでそれとデバッグを解凍しますブラウザでは、FireFoxデバッガは、plnkrアプリケーションのルートであるhelloモジュールをインスタンス化できないと言います。したがって、plnkrアプリケーションは、アプリケーションのメインモジュールをロードするという単純な問題を突き止めるとすぐに問題を再現できるはずです。 （どのように評価されるかを説明するコメント）。
CODE：
完全なコードは、上記のリンクでplnkrであるものの、次のように、私はまた、コードのセクションをコピーします：
index.htmlは以下のとおりです。
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<link data-require="[email protected]" data-semver="0.13.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="0.13.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.5.0" data-require="[email protected]"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<!-- start of content section -->
<h1>Hello Plunker!</h1>
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist" >
<li><a class="label label-success" href="/">Home</a></li>
<li><a class="label label-success" href="/public1">public1</a></li>
</ul>
<!-- modal test follows -->
<p><a href class="btn btn-default btn-lg " ng-click="deleteCustomer()">Click to Delete Customer</a></p>
<!-- end of modal test -->
</div>
<div class="container">
<div ng-view=""></div>
</div>
<!-- end of content section -->
<!-- begin local build files -->
<!-- <script src="script.js"></script> -->
<script src="modalService.js"></script>
<script src="home.js"></script>
<script src="public1.js"></script>
<script src="navigation.js"></script>
<!-- end local build files -->
</body>
</html>
script.jsは、次のとおりです。
'use strict';
/** * Main module of the application. */
angular
.module('hello', [
'ngAnimate',
'ngRoute',
'ngTouch', 'home', 'public1', 'navigation'
])
.config(function ($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'home',
controllerAs: 'home'
})
.when('/public1', {
templateUrl : 'public1.html',
controller : 'public1',
controllerAs: 'public1'
})
.otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
})
.run([ function() {
}]);
navigation.jsは次のとおりです。
'use strict';
angular
.module('navigation', ['modalService', 'ngRoute'])
.controller('navigation', function($scope, modalService, $route) {
$scope.tab = function(route) {
return $route.current && route === $route.current.controller;
};
$scope.deleteCustomer = function() {
var custName = 'Some Random Person';
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Delete Customer',
headerText: 'Delete ' + custName + '?',
bodyText: 'Are you sure you want to delete this customer?'
};
modalService.showModal({}, modalOptions).then(function (result) {
//some code will go here. But for now can we just
//get the modal to appear and for the cancel button to work?
});
}
});
そしてmodalService.jsは次のとおりです。
'use strict';
angular.module('modalService').service('modalService', ['$modal',
function ($modal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: 'modalContent.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
}]);
"私のローカルdevboxがjavascript/angularコンパイルをさせていない"と言うとき、あなたは連結/ uglifyタスクについて話していますか？ –
websocketの問題です。新しいスレッドを開くことができます:) –
同じエラーメッセージがありますか？ –