AngularJS ng-repeat体不会在md-button ng-click属性中替换$ index

Question

我定义了以下模板：

<div ng-app="WebApp" ng-controller="PortfolioCtrl" ng-cloak layout="row" layout-align="center center" style="margin-top: 10px">
	<md-content layout="row" layout-wrap style="width: 580px">
		<div flex-xs flex-gt-xs="50" layout="row" ng-repeat="property in portfolio track by property.uuid">
			<md-card md-theme="default" md-theme-watch="" style="width: 280px">
				<md-card-title>
					<md-card-title-text>
						<span class="md-headline">{{property.yield}}%</span>
						<span class="md-subhead">{{property.address[0]}}</span>
						<span ng-if="property.address.length > 1" class="md-subhead">{{property.address[1]}}</span>
						<span ng-if="property.address.length > 2" class="md-subhead">{{property.address[2]}}</span>
					</md-card-title-text>
					<md-card-title-media>
					<!-- 
						<div ng-if="property.photos.length > 0" class="md-media-sm card-media">
							<img src="{{property.photos[0]}}" style="width: 75px; height: 85px" />
						</div>
					 -->
					</md-card-title-media>
				</md-card-title>
				<div style="display: none">{{$index}}</div>
				<div id="property_$index" style="display: none">{{property.uuid}}</div>
				<md-card-actions layout="row" layout-align="end center">
					<md-button class="md-primary" ng-click="viewProperty( $index )">VIEW</md-button>
					<md-button class="md-primary" ng-click="uploadPhoto( $index )">UPLOAD PHOTOS</md-button>
				</md-card-actions>
			</md-card>
		</div>
	</md-content>
</div>

查看下面的浏览器开发人员输出，$ index规范在标记中正确替换：

<div style="display: none">{{$index}}</div>

但是在按钮和此DIV id中的ng-click属性中：

<div id="property_$index" style="display: none">{{property.uuid}}</div>

，他们不会替代。如果我用{{和}}包围这些$ index规范，我会收到一个角度语法错误：

按$ index跟踪也不起作用。请问有什么问题？

Answer 1

我不恰当地使用了{{}}。在ng-click()中，您无需使用它们，但是在其他位置（例如标签属性），则需要使用它们。

正确使用：

<md-card md-theme="default" md-theme-watch="" flex-direction="column" ng-click="viewProperty( $index )" style="width: 158px">

并且：

<div id="property_{{$index}}" style="display: none">{{property.uuid}}</div>