2
私はシングルページアプリケーションで簡単なナビゲーション領域を作成しようとしています。それはリストのリンクの束で構成されています。それぞれがNavigationControllerのメソッドを呼び出します。このメソッドは、$ state.goを呼び出して状態文字列を渡します。自分の状態が解決されない場合に備えて、私は "それ以外の"パスを設定しました。問題は、私が常に状態で指定されたテンプレートの代わりに "それ以外の"テンプレートを取得していることです。私は私のコントローラメソッドが呼び出されていることを知っているので、状態遷移はいくらか拡張されています。しかし、なぜ私はデフォルトのテンプレートで終わるのかわかりません。
var app = angular
.module("AppName", ['ui.router']);
angular
.module("AppName")
.config(['$locationProvider',
function ($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
angular.module("core", []);
angular
.module("AppName")
.requires
.push("core");
angular
.module("AppName")
.controller('NavBarController', ['$scope', '$state',
function ($scope, $state) {
$scope.username = null;
$scope.showNavBar = true;
$scope.navCollapsed = true;
$scope.goToProfile = function() {
console.log("goToProfile.");
$state.go('profile')
}
$scope.goToHistory = function() {
console.log("goToHistory");
$state.go('history')
}
}]);
angular
.module('core')
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(function ($injector, $location) {
console.log("Could not find: " + $location.$$path);
$location.path('/home');
});
$stateProvider
.state('home', {
url: '/home',
template: '<div> {{welcome}} </div>',
controller: 'HomeController'
});
$stateProvider
.state('profile', {
url: '/profile',
template: '<div>This is {{username}}\'s profile! </div>',
controller: 'ProfileController'
});
$stateProvider
.state('history', {
url: '/history',
template: '<div>{{history}}</div>',
controller: 'HistoryController'
});
}])
angular
.module('core')
.controller('HomeController', ['$scope',
function ($scope) {
$scope.welcome = "Welcome Home!";
}]);
angular
.module('core')
.controller('ProfileController', ['$scope',
function ($scope) {
console.log("Running ProfileController.")
$scope.username = "Bunny the rabbit";
}]);
angular
.module('core')
.controller('HistoryController', ['$scope',
function ($scope) {
console.log("Running HistoryController.")
$scope.history = ["item1", "item2", "item3"];
}]);
angular
.element(document)
.ready(function() {
if (window.location.hash === '#_=_') {
window.location.hash = '#!';
}
angular.bootstrap(document, ["AppName"]);
});
そして、私のHTML：：私はフィドルhereを作成している
<body>
<div ng-controller="NavBarController">
<ul>
<li><a href="#" ng-click="goToProfile()">Profile</a></li>
<li><a href="#" ng-click="goToHistory()">History</a></li>
</ul>
</div>
<div class="app">
<div class='app-body'>
<div class='app-content'>
<ui-view class="ng-scope">
<div>
Some place holder html
</div>
</ui-view>
</div>
</div>
</div>
</body>
は、ここに私のコード（バイオリンへのリンク以下である）です。
私はangularjsに精通していますが、この問題は私を困惑させました。 $ state.goの呼び出しは新しい状態のテンプレートを適用することを意味する状態遷移を引き起こすはずです。何らかの理由で、この一見単純なシナリオがここでは機能していません。私はSOで他の答えを試みたが、何も助けなかった。私はこの行動に干渉しているものを見落としていると思う。
あなたはUIのルータを使用しているので、あなたはUI-sref' '上' NG-click'を使用しているいずれかの理由があるのでしょうか？ – JAAulde
@JAAulde昨日まで、私はui-srefを認識していなかったこと以外は特別な理由はありません。私はそれをここで使うほうがいいと思う。 – Mustafa
意味があります！ :) – JAAulde