BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] Ui-srefがクリッカブルリンクを生成しない/動作しない

2022-03-13 12:22:36

質問

以前はng-routeを使っていて、うまくいっていたのですが、UI Routerではリンクがクリックできなくなりました。リンクがクリックできるときは、非常にランダムですが、私が使っているhtmlテンプレートは表示されません。

HTMLです。 

<head>
    <title>Tutorial</title>

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>

<body>

   <ng-view></ng-view>

    <ul class="menu">
        <li><a ui-sref="view1">view1</a></li>
        <li><a ui-sref="view2">view2</a></li>
    </ul>

.js 

angular.module('myApp', [
    'myApp.controllers',
    'ui.router'
    ]);

angular.module('myApp').config(function($stateProvider, $urlRouterProvider) {

    $stateProvider.state('view1',{
        url: '/view1',
        controller:'Controller1',
        templateUrl:'/view1.html' 
    }).state('view2', {
        url: '/view2/:firstname/:lastname',
        controller: 'Controller2',
        resolve: {
            names: function() {
                return ['Misko', 'Vojta', 'Brad'];
            }
        },
        templateUrl: '/view2.html'
    });

    $urlRouterProvider.otherwise('/view1');

});


angular.module('myApp.controllers', []).controller('Controller1', function($scope, $location, $state) {

    $scope.loadView2=function() {
        $state.go('view2', {
            firstname: $scope.firstname,
            lastname: $scope.lastname
        });
    };
}).controller('Controller2', function($scope, $stateParams, names) {
    $scope.firstname = $stateParams.firstname;
    $scope.lastname = $stateParams.lastname;
    $scope.names = names;

});

私はAngularJSに関するSitePointの電子書籍の指示に従っているので、何が間違っているのか、何を見逃しているのか、よくわかりません。

http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn

解決方法は？

を表示しません。 ui-view マークアップのどこにもないため、状態のビューはレンダリングおよびインジェクションされていない可能性が高いです。

は必要ありません。 ng-view . 1つの ui-view は、メインのHTMLファイル内に存在する必要があります。トップレベルの状態は、そこにレンダリングされ、注入されます。状態はサブステートを持つことができ、サブステートを持つ状態の各テンプレートは、メインHTMLファイル内に ui-view を作成し、そこにレンダリングされたサブステートを挿入します。

見る ui-router のReadme をご覧ください。また、彼らは良い デモアプリ そのソースは、このステート・ルーティング・エンジンがどんなもので、どのように使うのかを理解するのにとても役に立ちました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します