2014-05-22 4 views
26

मैं 1 index.html के साथ एक सरल एसपीए बनाने की कोशिश करता हूं जिसमें टेम्पलेट शामिल हैं।Angular.js: टेम्पलेट में ng-href का उपयोग कैसे करें?

<a ng-href="#/myPage">myPage</a> 

में index.html लेकिन मेरे टेम्पलेट्स में नहीं, लिंक उन पर क्लिक नहीं है काम:

मैं एनजी-href निर्देश के साथ एक समस्या मिला है। लेकिन href अभी भी काम करता है।

<a href="#/myPage">myPage</a> 

मेरा ऐप:

index.html:

... 
<body ng-app="myApp"> 
    <a ng-href="#/myPage" target="_self">link</a> <!-- work ! --> 
    <div class="container" ng-view=""></div> 
</body> 
... 

app.js:

'use strict'; 

angular.module('myApp', 
     [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]).config(
     function($routeProvider) { 
      $routeProvider.when('/', { 
       templateUrl : 'views/main.tpl.html', 
       controller : 'MainCtrl' 
      }) 

      .when('/myPage', { 
       templateUrl : 'views/page.tpl.html', 
       controller : 'MainCtrl' 
      }) 

      .otherwise({ 
       redirectTo : '/' 
      }); 
     }); 

controller.js

'use strict'; 

    myApp.controller('MainCtrl', function() { 
     this.myColor = 'blue'; 
    }); 

page.tpl.html

<div> 
    <a ng-href="#/myPage" target="_self">link</a> <!-- Dont work --> 
    <a ng-href="#/myPage" target="_self">link</a> <!-- Dont work --> 
    <a ng-href="#/myPage{{}}">link</a> <!-- Dont work --> 
    <a ng-href="#/{{ 'myPage' }}">link</a> <!-- Dont work --> 
    <a href="#/myPage" target="_self">link</a> <!-- Work ! --> 
</div> 

मैं एनजी-href और क्यों परिणाम href से अलग है के साथ समस्या यह समझ में नहीं आता।

<a ng-href="#/{{myPathVariable}}"/>Take Me Somewhere</a> 

कहाँ अपने दायरे में: मैं कोणीय 1,2

उत्तर

49

ngHref गतिशील तो जैसे href विशेषता के कोणीय चर बाध्य करने के लिए प्रयोग किया जाता है का उपयोग

$scope.myPathVariable = 'path/to/somewhere'; 
फिर

के बाद कोणीय यह संकलित है, यह ऐसा लगता है:

<a ng-href="#/path/to/somewhere" href="#/path/to/somewhere" ... other angular attributes>Take Me Somewhere</a> 

यदि आपका पथ को पृष्ठ में हार्डकोड किया गया है (आपको पता है कि लिंक आपको पृष्ठ लोड पर ले जाना चाहिए), आप इसे केवल एक href में निर्दिष्ट कर सकते हैं, यही कारण है कि आपका तीसरा उदाहरण काम करता है। जब आप जेएस लोड के बाद गतिशील रूप से मार्ग तय करने के लिए कोणीय की आवश्यकता होती है तो केवल ngHref का उपयोग करें। यह आपके उपयोगकर्ता को लिंक पर क्लिक करने से रोकता है और एक अमान्य मार्ग पर जा रहा है इससे पहले कि कोणीय को समझ लिया जाए कि लिंक कहां इंगित करना चाहिए। प्रलेखन here

+1

ठीक है, लेकिन क्यों link टेम्पलेट्स में काम नहीं करते? – Thomas

+6

यह काम नहीं करेगा क्योंकि आप 'myPage' को गुण – Mike

+2

में चर के बजाय स्ट्रिंग अक्षर के रूप में पास कर रहे हैं, मैं यह सुनिश्चित करने के लिए खाली href टैग जोड़ने की अनुशंसा करता हूं कि ब्राउज़र इसे एक लिंक के रूप में उठाए: Take Me Somewhere

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