Question

我正在努力学习AngularJS，在Lynda.com上观看视频后，我有一个问题，我无法弄明白。当我使用ng-src按照视频指示的方式添加图像时，以及angularjs网站指示的方式，代码加倍。

HTML：

<section class="memberInfo">
  <div ng-model="members">
    <h1>{{members[whichItem].name}}</h1>
    <img ng-src="images/faces/{{members[whichItem].shortname}}.png" alt="Photo of {{members[whichItem].name}}" />
    <div class="info">
      <h2>{{members[whichItem].jobtitle}}</h2>
      <p>{{members[whichItem].bio}}</p>
    </div>
  </div>
  <a href="index.html">&laquo; Back</a>

controller.js

var memberControllers = angular.module('memberControllers', []);

memberControllers.controller('TeamController', ['$scope', '$http', function ($scope, $http) {
  $http.get('js/data.json').success(function(data) {
   $scope.members = data;
  });
}]);

memberControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
  $http.get('js/data.json').success(function(data) {
    $scope.members = data;
    $scope.whichItem = $routeParams.itemId;
  });
}]);

浏览器中显示的内容是

<img ng-src="images/faces/fname_lname.png" alt="Photo of First Last" src="images/faces/fname_lname.png">

404错误，路径跳过短名称并离开...... / images / faces / .png

我在这里做错了什么？

Answer 1

ng-src仍然是一个属性，但它实际上并没有显示图像（它只是Angular解析图像源的一种方式，并将解析后的源放在实际中src属性）。

我认为Angular在加载实际的ng-src之后没有删除src属性有几个原因（虽然这可能是猜想）：

没有理由（它是一个增加的操作，而Angular已经是操作密集型的），并且
稍后可能需要在臭名昭着的范围＆＃34;脏检查＆＃34;中引用ng-src，尤其是在ng-src

为什么角度ng-src会使我的图像倍增？

1 个答案: