Question

为什么Angular不会在数据属性中插值？

例如：

这个模板： <img data-src="https://farm4.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" src="https://farm4.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" title="{{photo.title}}" />

呈现： <img data-src="https://farm4.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" src="https://farm4.staticflickr.com/3861/14472009669_e97c9a201a.jpg" title="DSC00319">

所有内容都是插值但数据属性。我已经看到了其他一些问题，但没有很好地解释为什么这种行为以及我应该做的事情。

我正在使用以下配置加载此路线的模块：

.config(['$stateProvider', function config( $stateProvider ) {
    $stateProvider.state( 'all', {
        url: '/all',
        templateUrl: 'src/app/all/all.tmpl.html',
        controller: 'all'
      });
}])
// Sample controller where service is being used
.controller('all', ['$scope', '$http', 'version', function ($scope, $http, version) {
        $scope.scopedAppVersion = version;
        $http.jsonp('https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=blahblah&user_id=57933175@N08&format=json&per_page=50&page=1&jsoncallback=JSON_CALLBACK')
        .success(function(data){
            $scope.photos = data.photos.photo;
        });
}]);

all.tmpl.html

<li ng-repeat="photo in photos"> <a href="https://www.flickr.com/photos/neptunian/{{photo.id}}/in/photostream/lightbox/" target="new"> <img data-src="https://farm4.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" src="https://farm4.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" title="{{photo.title}}" /> </a> </li>

更新我认为'data-src'可能是Angular的保留属性。使用'data-blahblah'或任何其他属性都可以。

Answer 1

我试过jsfiddle，但有一点错误。

使用 data-ng-src 代替 data-src 。该指令称为 data-ng-src 或仅 ng-src 。

<img data-ng-src="{{'http://www.w3schools.com/images/'+photo.img || ''}}" title="{{photo.title}}" />

或

<img data-ng-src="http://www.w3schools.com/images/{{photo.img}}" title="{{photo.title}}" />

属性差异：

data-src ：可添加到元素的data- *属性之一
src ：通常用于img元素的网址。
data-ng-src 或 ng-src ：angular会评估该值并将src设置为img元素。

AngularJS不在数据属性中插值

1 个答案: