AngularJS API Reference
auto
auto/service
auto/service/$injector
auto/service/$provide
ng
ng/directive
ng/directive/a
ng/directive/form
ng/directive/input
ng/directive/input[checkbox]
ng/directive/input[date]
ng/directive/input[dateTimeLocal]
ng/directive/input[email]
ng/directive/input[month]
ng/directive/input[number]
ng/directive/input[radio]
ng/directive/input[text]
ng/directive/input[time]
ng/directive/input[url]
ng/directive/input[week]
ng/directive/ngApp
ng/directive/ngBind
ng/directive/ngBindHtml
ng/directive/ngBindTemplate
ng/directive/ngBlur
ng/directive/ngChange
ng/directive/ngChecked
ng/directive/ngClass
ng/directive/ngClassEven
ng/directive/ngClassOdd
ng/directive/ngClick
ng/directive/ngCloak
ng/directive/ngController
ng/directive/ngCopy
ng/directive/ngCsp
ng/directive/ngCut
ng/directive/ngDblclick
ng/directive/ngDisabled
ng/directive/ngFocus
ng/directive/ngForm
ng/directive/ngHide
ng/directive/ngHref
ng/directive/ngIf
ng/directive/ngInclude
ng/directive/ngInit
ng/directive/ngKeydown
ng/directive/ngKeypress
ng/directive/ngKeyup
ng/directive/ngList
ng/directive/ngModel
ng/directive/ngModelOptions
ng/directive/ngMousedown
ng/directive/ngMouseenter
ng/directive/ngMouseleave
ng/directive/ngMousemove
ng/directive/ngMouseover
ng/directive/ngMouseup
ng/directive/ngNonBindable
ng/directive/ngOpen
ng/directive/ngPaste
ng/directive/ngPluralize
ng/directive/ngReadonly
ng/directive/ngRepeat
ng/directive/ngSelected
ng/directive/ngShow
ng/directive/ngSrc
ng/directive/ngSrcset
ng/directive/ngStyle
ng/directive/ngSubmit
ng/directive/ngSwitch
ng/directive/ngTransclude
ng/directive/ngValue
ng/directive/script
ng/directive/select
ng/directive/textarea
ng/filter
ng/filter/currency
ng/filter/date
ng/filter/filter
ng/filter/json
ng/filter/limitTo
ng/filter/lowercase
ng/filter/number
ng/filter/orderBy
ng/filter/uppercase
ng/function
ng/function/angular.bind
ng/function/angular.bootstrap
ng/function/angular.copy
ng/function/angular.element
ng/function/angular.equals
ng/function/angular.extend
ng/function/angular.forEach
ng/function/angular.fromJson
ng/function/angular.identity
ng/function/angular.injector
ng/function/angular.isArray
ng/function/angular.isDate
ng/function/angular.isDefined
ng/function/angular.isElement
ng/function/angular.isFunction
ng/function/angular.isNumber
ng/function/angular.isObject
ng/function/angular.isString
ng/function/angular.isUndefined
ng/function/angular.lowercase
ng/function/angular.module
ng/function/angular.noop
ng/function/angular.toJson
ng/function/angular.uppercase
ng/object
ng/object/angular.version
ng/provider
ng/provider/$animateProvider
ng/provider/$compileProvider
ng/provider/$controllerProvider
ng/provider/$filterProvider
ng/provider/$httpProvider
ng/provider/$interpolateProvider
ng/provider/$locationProvider
ng/provider/$logProvider
ng/provider/$parseProvider
ng/provider/$rootScopeProvider
ng/provider/$sceDelegateProvider
ng/provider/$sceProvider
ng/service
ng/service/$anchorScroll
ng/service/$animate
ng/service/$cacheFactory
ng/service/$compile
ng/service/$controller
ng/service/$document
ng/service/$exceptionHandler
ng/service/$filter
ng/service/$http
ng/service/$httpBackend
ng/service/$interpolate
ng/service/$interval
ng/service/$locale
ng/service/$location
ng/service/$log
ng/service/$parse
ng/service/$q
ng/service/$rootElement
ng/service/$rootScope
ng/service/$sce
ng/service/$sceDelegate
ng/service/$templateCache
ng/service/$timeout
ng/service/$window
ng/type
ng/type/$cacheFactory.Cache
ng/type/$compile.directive.Attributes
ng/type/$rootScope.Scope
ng/type/angular.Module
ng/type/form.FormController
ng/type/ngModel.NgModelController
ngAnimate
ngAnimate/provider
ngAnimate/provider/$animateProvider
ngAnimate/service
ngAnimate/service/$animate
ngCookies
ngCookies/service
ngCookies/service/$cookies
ngCookies/service/$cookieStore
ngMessages
ngMessages/directive
ngMessages/directive/ngMessage
ngMessages/directive/ngMessages
ngMock
ngMock/function
ngMock/function/angular.mock.dump
ngMock/function/angular.mock.inject
ngMock/function/angular.mock.module
ngMock/object
ngMock/object/angular.mock
ngMock/provider
ngMock/provider/$exceptionHandlerProvider
ngMock/service
ngMock/service/$exceptionHandler
ngMock/service/$httpBackend
ngMock/service/$interval
ngMock/service/$log
ngMock/service/$timeout
ngMock/type
ngMock/type/angular.mock.TzDate
ngMockE2E
ngMockE2E/service
ngMockE2E/service/$httpBackend
ngResource
ngResource/service
ngResource/service/$resource
ngRoute
ngRoute/directive
ngRoute/directive/ngView
ngRoute/provider
ngRoute/provider/$routeProvider
ngRoute/service
ngRoute/service/$route
ngRoute/service/$routeParams
ngSanitize
ngSanitize/filter
ngSanitize/filter/linky
ngSanitize/service
ngSanitize/service/$sanitize
ngTouch
ngTouch/directive
ngTouch/directive/ngClick
ngTouch/directive/ngSwipeLeft
ngTouch/directive/ngSwipeRight
ngTouch/service
ngTouch/service/$swipe
?
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
Figuren
AngularJS: API: ng/directive/ngHref
ngHref
- - directive in module ng
在href屬性使用Angular的{{hash}}等標(biāo)記會使鏈接跳轉(zhuǎn)到錯誤的URL，當(dāng)用戶在Angular用值替換 {{hash}}標(biāo)記前點(diǎn)擊了它。在Angular替換標(biāo)記前鏈接都是錯誤的，會返回類似404錯誤。
ngHref指令解決了這個問題。
錯誤的寫法：
<a href="http://www.gravatar.com/avatar/{{hash}}"/>正確的寫法：
<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>指令信息
- 這個指令執(zhí)行優(yōu)先級為99.
用法
- 作為屬性使用:
<A ng-href=""> ... </A>
參數(shù)
| 參數(shù) | 類型 | 詳述 |
|---|---|---|
| ngHref | template | 可以包含 |
示例
這個例子演示幾種在鏈接中使用 href、ng-href和ng-click 屬性的組合，以及它們不同的行為：
index.html
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)protractor.js
it('should execute ng-click but not reload when href without value', Function() {
element(by.id('link-1')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('1');
expect(element(by.id('link-1')).getAttribute('href')).toBe('');});
it('should execute ng-click but not reload when href empty string', Function() {
element(by.id('link-2')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('2');
expect(element(by.id('link-2')).getAttribute('href')).toBe('');});
it('should execute ng-click and change url when ng-href specified', Function() {
expect(element(by.id('link-3')).getAttribute('href')).toMatch(/\/123$/);
element(by.id('link-3')).click();
// At this point, we navigate away from an Angular page, so we need
// to use browser.driver to get the base webdriver.
browser.wait(Function() {
return browser.driver.getCurrentUrl().then(Function(url) {
return url.match(/\/123$/);
});
}, 5000, 'page should navigate to /123');});
xit('should execute ng-click but not reload when href empty string and name specified', Function() {
element(by.id('link-4')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('4');
expect(element(by.id('link-4')).getAttribute('href')).toBe('');});
it('should execute ng-click but not reload when no href but name specified', Function() {
element(by.id('link-5')).click();
expect(element(by.model('value')).getAttribute('value')).toEqual('5');
expect(element(by.id('link-5')).getAttribute('href')).toBe(null);});
it('should only change url when only ng-href', Function() {
element(by.model('value')).clear();
element(by.model('value')).sendKeys('6');
expect(element(by.id('link-6')).getAttribute('href')).toMatch(/\/6$/);
element(by.id('link-6')).click();
// At this point, we navigate away from an Angular page, so we need
// to use browser.driver to get the base webdriver.
browser.wait(Function() {
return browser.driver.getCurrentUrl().then(Function(url) {
return url.match(/\/6$/);
});
}, 5000, 'page should navigate to /6');});