Durum görünümü bile

Köşeli UI Yönlendiricisi'ni kullanıyorum bile yükleyemiyor. Lütfen aşağıdaki kodu bulun.Durum görünümü bile

index.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
    <script src="../../Scripts/AngularControllers/LoginHomeControllers/RouteMainController.js"></script> 
    <script src="../../Scripts/AngularControllers/LoginHomeControllers/LoginController.js"></script> 
</head> 
<body> 
    <div ui-view="mainview"></div> 
</body> 
</html>

RouteMainController.js

var app = angular.module("appHome", ['ui.router']); 

app.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/login'); 
    $stateProvider 
     .state('introduction', { 
      url: '/', 
      views: { 
       'mainview': 
       { 
        templateUrl: 'Login.html', 
        controller: 'ctrlLogin' 
       } 
      } 
     }) 
     .state('login', { 
      url: '/login', 
      views: { 
       'mainview': 
       { 
        templateUrl: 'Login.html', 
        controller: 'ctrlLogin' 
       } 
      } 
     }) 
     .state('home', { 
      url: '/home', 
      views: { 
       'mainview': 
       { 
        templateUrl: 'Home.html', 
       } 
      } 
     }) 
     .state('home.requestsummary', { 
      url: '/requestsummary', 
      views: { 
       'homedetailview': 
       { 
        templateUrl: 'Test1.html', 
       } 
      } 
     }) 
     .state('home.requestsummary.requestdetail', { 
      url: '/requestdetail', 
      views: { 
       'homedetailview': 
       { 
        template: "'<h3>Foo</h3>'" 
       } 
      } 
     }) 
});

Login.html

<div> 
    <button id="btnAdd" type="submit" ng-click="Login()">Login</button> 
</div>

LoginController.js

var myApp = angular.module('appHome'); 
myApp.controller("ctrlLogin", ['$scope', '$location', function ($scope, $location) { 
    $scope.Login = function() { 
     window.location.href = '#!home/requestsummary';  
    } 
}]);

Home.html

<!--Sample Code for displaying Menu Tab and corresponding link--> 
<li> 
    <a href="#">Employees <span class="caret"></span></a> 
    <ul class="dropdown-menu sub-menu"> 
     <li><a ui-sref=".employeeadd">Add Employee Record</a></li>  
    </ul> 
</li> 

<div ui-view="homedetailview"></div>

Test1.html başarıyla oturum ve "menü sekmesini alma am güçlü

<a ui-sref=".requestdetail">Hello World</a>

Merhaba Dünya bağlantısı. Menü Sekmesini her zaman görüntülemek ve aşağıdaki metni dinamik olarak değiştirmek istiyorum.

Sorunum, "Merhaba Dünya" Bağlantısı'nı tıklattığımda, "Merhaba Dünya" Bağlantısı yerine görünmek üzere Foo beklemem bekleniyor, ancak çalışmıyor. Hatta durumları değiştiriyor (url) ancak gerçek görünümü yüklemiyor.

Lütfen bana yardım edin.

kaynak

2017-12-05 user1843970

İstenmeyen bir devlet yerine "requestummary" ın bir kardeşi olmasını 'rica ediyorum' gibi görünüyor – shaunhusain

İstekler sayfasındaki "Merhaba Dünya" gibi birçok link olabilir ve linke tıklandığında requestdetail sayfasını açar. Ancak bağlantı her tıklandığında, içerikten talepte bulunsun içerik taleplerini geçersiz kılar. Çıkış yolu nedir? – user1843970

Kodunuzda yapısal bir sorun var. requestdetail durumu, home.requestsummary'un bir alt halidir ve bu nedenle, HTML'yi bağlayabildiği şablonunun home.requestsummary durumunu gerektirir.

Kodunuza göre, Test1.html içinde ui-view yoktur. Yani, sadece başka hiçbir sorun değil, Test1.html bir ui-view eklemeyi deneyin ve aşağıdaki gibi devlet yapılandırma değiştirebilir olmadığından emin olmak için: sadece kontrol Bu değişiklikten sonra

<!-- Test.html --> 
<a ui-sref=".requestdetail">Hello World</a> 
<div ui-view></div> 

// RouteMainController.js 
... 
.state('home.requestsummary.requestdetail', { 
    url: '/requestdetail', 
    template: "'<h3>Foo</h3>' 
})

başlığı Foo belirirse görünüşte. Görünürse, kodunuzla her şey yolunda. Şimdi, ikinci bölüm Foo pozisyonunu Hello world linkinin gösterildiği yerde aynı yere yüklemektir.

Bunu yapmak için , homedetailview, home.requestsummary ana durumu olan Home.html içinde bulunduğundan, görünüm hedefi değiştirmeniz gerekir.

// RouteMainController.js 
... 
.state('home.requestsummary.requestdetail', { 
    url: '/requestdetail', 
    views: { 
    '[email protected]': { 
     template: "'<h3>Foo</h3>' 
    } 
    } 
})

Bu tamamen devlet home yılında homedetailview hedefleyecektir ve home.requestsummary.requestdetail için şablon orada gösterilir şu şekildedir: Yani, home.requestsummary.requestdetail için devlet yapılandırmasını değiştirmek gerekir.

kaynak

2017-12-07 05:58:09 31piy

Yup, bununla aynı fikirdeyecek bir örnek üzerinde çalışıyordu. Https://next.plnkr.co/edit/IxZW3MjMTgoAdmQy – shaunhusain

@shaunhusain - Bunun için bir plunker yaptığınız için teşekkür ederiz. Gerçekten faydalı! – 31piy

Hiç sorun kopyalamak ve yapıştırmak için zaman ayırmak zorunda kaldım sorudaki tüm kodu dahil için teşekkürler, sonra ne olduğunu görebiliyordu kez çözmek için daha kolay, sorun ne eylem olduğunu görebiliyordu. – shaunhusain

cevap

İlgili konular