राज्य बदलते समय भी ui-view लोड करने में सक्षम नहीं है

मैं कोणीय यूआई राउटर का उपयोग कर रहा हूं। कृपया नीचे दिया गया कोड पाएं।राज्य बदलते समय भी ui-view लोड करने में सक्षम नहीं है

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

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

मैं सफलतापूर्वक लॉगिन और के साथ "मेनू टैब हो रही करने में सक्षम हूँ हैलो विश्व संपर्क। मैं हमेशा मेनू टैब प्रदर्शित करना चाहता हूं और नीचे दिए गए पाठ को गतिशील रूप से बदलना चाहता हूं।

मेरी समस्या यह है कि जब भी मैं "हैलो वर्ल्ड" लिंक पर क्लिक करता हूं, तो मुझे उम्मीद है कि "हैलो वर्ल्ड" लिंक के स्थान पर दिखाई देने के लिए Foo है लेकिन यह काम नहीं कर रहा है। यहां तक कि यह राज्यों (यूआरएल) बदल रहा है लेकिन यह वास्तविक दृश्य लोड नहीं कर रहा है।

कृपया इस पर मेरी सहायता करें।

स्रोत

2017-12-05 user1843970

ऐसा लगता है कि आप एक वंशज राज्य – shaunhusain

के बजाय 'requestummary' के भाई होने का अनुरोध करते हैं, अनुरोधकर्ता पृष्ठ में" हैलो वर्ल्ड "जैसे कई लिंक हो सकते हैं और यह लिंक क्लिक के आधार पर अनुरोध पृष्ठ खोल देगा। लेकिन जब भी लिंक क्लिक किया जाता है तो अनुरोध सामग्री सामग्री अनुरोध सामग्री को ओवरराइड कर देगी। रास्ता क्या है? – user1843970

आपके कोड के साथ एक संरचनात्मक समस्या है। राज्य requestdetailhome.requestsummary का एक बाल राज्य है, और इस प्रकार, राज्य के टेम्पलेट में ui-view की आवश्यकता है, जिसके लिए यह HTML को बाध्य कर सकता है।

आपके कोड के अनुसार, Test1.html में कोई ui-view नहीं है। तो, सिर्फ यकीन है कि वहाँ कोई अन्य समस्या यह है कि, आप Test1.html में एक ui-view जोड़ने की कोशिश कर सकते हैं, और राज्य config बदलने के रूप में निम्नानुसार हो:

<!-- 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>' 
})

इस परिवर्तन के बाद, बस की जाँच करता है, तो शीर्षक फू प्रकट होता है दृश्य में। यदि ऐसा प्रतीत होता है, तो सब कुछ आपके कोड के साथ ठीक है। अब, दूसरा भाग शीर्षक Foo को उसी स्थान पर लोड करना है जहां का लिंक हैलो वर्ल्ड दिखाया गया है।

ऐसा करने के लिए, आपको दृश्य लक्ष्य को बदलने की आवश्यकता है, क्योंकि homedetailviewHome.html में मौजूद है, जो home.requestsummary की मूल स्थिति है।

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

यह बिल्कुल राज्य home में homedetailview को लक्षित करेगा और home.requestsummary.requestdetail के लिए अपने टेम्पलेट वहाँ दिखाया जाएगा: तो, आप इस प्रकार home.requestsummary.requestdetail के लिए राज्य विन्यास को बदलने की जरूरत।

स्रोत

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

यूप इस बात से सहमत हैं कि यहां जवाब देने के लिए सिर्फ एक उदाहरण पर काम कर रहा है https://next.plnkr.co/edit/IxZW3MjMTgoAdmQy – shaunhusain

@shaunhusain - इसके लिए प्लंकर बनाने के लिए धन्यवाद। वास्तव में सहायक! – 31piy

प्रश्न में सभी कोड शामिल करने के लिए कोई समस्या नहीं है, मुझे बस कॉपी और पेस्ट करने का समय लेना पड़ा था, फिर यह देख सकता था कि आपकी समस्या क्या है, इसे हल करने के बाद हमेशा हल करना आसान होता है। – shaunhusain

राज्य बदलते समय भी ui-view लोड करने में सक्षम नहीं है

उत्तर

संबंधित मुद्दे