दृश्यता टॉगल एनजी-शामिल मार्ग

के आधार पर मैं निम्नलिखित विन्यास है index.html वहाँ एक हैदृश्यता टॉगल एनजी-शामिल मार्ग

$routeProvider 
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false }) 
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });

और कहीं मेरी जड़ में:

<a href="#/cars">Cars</a> 
<a href="#/bikes">Bikes</a> 
<div ng-view></div>

अब, मैं दोनों चाहते हैं विचार एक ही समय में डीओएम में लोड और उत्पन्न, और मार्ग/यूआरएल के आधार पर उनमें से एक दिखाएं।

कुछ निम्न की तरह कुछ (वास्तविक कार्य कोड नहीं, बस आपको एक विचार देने के लिए)।

app.js:

$routeProvider 
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false }) 
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });

जड़ index.html:

<a href="#/cars">Cars</a> 
<a href="#/bikes">Bikes</a> 
<div ng-include="'app/cars/index.html'" ng-show="carsVisible"></div> 
<div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"></div>

अद्यतन: मुझे पता है एनजी-व्यू तरह का यह करता है, लेकिन अंतर यह सूक्ष्म है, मौजूद है । मैं चाहता हूं कि प्रत्येक दृश्य का एचटीएमएल एक बार उत्पन्न हो और हर समय डोम में रहें।

स्रोत

2013-02-28 luisfarzati

एनजी-व्यू के साथ इसे पूरा करना संभव नहीं है। लेकिन सवाल यह है कि आप वास्तव में ऐसा क्यों करना चाहते हैं। क्या ऐसा इसलिए है क्योंकि आप प्रत्येक मार्ग को 'प्रीप्रोसेस' करना चाहते हैं ताकि यह तेज़ी से लोड हो सके? रूटिंग पहले से ही बहुत तेज है, जब तक कि आपके नियंत्रकों को कुछ एसिंक डेटा की आवश्यकता न हो, इस स्थिति में आप रूट परिभाषा ऑब्जेक्ट के अंदर 'संकल्प' का उपयोग करेंगे, साथ ही पृष्ठभूमि में एसिंक डेटा लाने के लिए कुछ ऐप प्रारंभिक कोड भी उपयोग करेंगे। – Stewie

खाका अनुभाग देखें मैं के माध्यम से अपने विचारों के सभी लोड करने के लिए एक एकल RouteCtrl बनाया एनजी-शामिल हैं। एनजी-व्यू का उपयोग नहीं किया जाता है। मैंने टेम्पलेट्स को रेखांकित किया। टेम्पलेट्स में विशिष्ट नियंत्रकों को खींचने के लिए अपने स्वयं के एनजी-नियंत्रक निर्देश हो सकते हैं।

<body ng-controller="RouteCtrl"> 
    <a href="#/cars">Cars</a> 
    <a href="#/bikes">Bikes</a> 
    <div ng-controller="RouteCtrl"> 
     <div ng-include="'/cars.html'" ng-show="carsVisible"></div> 
     <div ng-include="'/bikes.html'" ng-show="bikesVisible"></div> 
    </div> 

    <script type="text/ng-template" id="/cars.html"> 
    Cars template. 
    </script> 
    <script type="text/ng-template" id="/bikes.html"> 
    Bikes template. 
    </script>

$ routeProvider अभी भी कॉन्फ़िगर किया गया है, लेकिन कोई टेम्पलेट या नियंत्रक निर्दिष्ट किया जाता है, RouteCtrl के कारण हमेशा सक्रिय होने के लिए। वह नियंत्रक $routeChangeSuccess ईवेंट के लिए सुनता है और तदनुसार एनजी-शो गुणों का उपयोग करता है।

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/cars', {}) 
    .when('/bikes', {}) 
}); 

app.controller('RouteCtrl', function($scope, $route, $location) { 
    $scope.$on('$routeChangeSuccess', function() { 
    var path = $location.path(); 
    console.log(path); 
    $scope.carsVisible = false; 
    $scope.bikesVisible = false; 
    if(path === '/cars') { 
     $scope.carsVisible = true; 
    } else if(path === '/bikes') { 
     $scope.bikesVisible = true; 
    } 
    }); 
});

Plunker

इस समाधान के लिए विचार @Andy से है।

स्रोत

2013-03-02 01:51:30

ng-include का उपयोग करने के बजाय, आपको ng-view का उपयोग करना चाहिए;

यह या तो app/cars/index.html या app/bikes/index.html

<a href="#/cars">Cars</a> 
<a href="#/bikes">Bikes</a> 
<div ng-view></div>

की सामग्री प्रदर्शित करेगा से http://docs.angularjs.org/tutorial/step_07

स्रोत

2013-02-28 02:42:35

हाय पास्कल, आपके उत्तर के लिए धन्यवाद! हालांकि, यह वह नहीं है जिसे मैं ढूंढ रहा हूं। मैंने अपने प्रश्न में एक स्पष्टीकरण दिया। एनजी-व्यू सामग्री को टॉगल करेगा, हां, लेकिन यह बाहरी दृश्य से सामग्री को हटाकर और नए दृश्य के लिए सामग्री डालने से करता है, हर बार मार्ग बदलता है। मैं पहले से ही दोनों सामग्री को प्रस्तुत करना चाहता हूं और एक या दूसरे को एनजी-शो या सीएसएस डिस्प्ले के साथ टॉगल करना चाहता हूं। – luisfarzati

कहां/कब आप 'कार दृश्यमान' और 'बाइक दृश्यमान' बदलते हैं, और क्या आपके पास रूट 'index.html' में कहीं नियंत्रक है? –

उपयोग एक शो के निर्देश के साथ एक सेवा:

<div ng-show="myService.isActive('/')">Show this when at default route</div> 
<div ng-show="myService.isActive('/cars')">Show this when at cars</div>

सेवा:

myApp.factory('MyService', 
    function ($location) { 
     return { 
      isActive: function (path) { 
       return (($location.path() == path)); 
      } 
     } 
    } 
);

अनुप्रयोग।js:

// this is run after angular is instantiated and bootstrapped 
myApp.run(function ($rootScope, myService) { 
    $rootScope.breadcrumbService = MyService; 
});

स्रोत

2014-02-28 10:27:09 Zymotik

मैं एक और तरीका है, जो मुझे लगता है पाया सरल, तेज और सबसे प्रबंधनीय:

How to set bootstrap navbar active class with Angular JS?

कौन सा है:

उपयोग एनजी नियंत्रक एक भी चलाने के लिए एनजी-व्यू के बाहर नियंत्रक:

<div class="collapse navbar-collapse" ng-controller="HeaderController"> 
    <ul class="nav navbar-nav"> 
     <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li> 
     <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li> 
     <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li> 
    </ul> 
</div> 
<div ng-view></div>

और सह में शामिल ntrollers.js:

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
     return viewLocation === $location.path(); 
    }; 
}

स्रोत

2014-06-23 20:42:10 Zymotik

दृश्यता टॉगल एनजी-शामिल मार्ग

उत्तर

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