Question

我有一些HTML看起来像：

<custom-logo>
    <div>
        <img src="logo.png">
    </div>
    <custom-logo-after>
    </custom-logo-after>
</custom-logo>

我试图找出如何修改Angular JS中的custom-logo指令以包含img标记周围的链接，以便我可以在Angular JS中添加动态链接地址。

Answer 1

您可以使用ng-transclude来执行此操作

.directive('customLogo', function() {
    return {
        transclude: true,
        template: '<a href="http://www.google.com"><ng-transclude></ng-transclude></a>'
    }
});

Answer 2

你可以这样做Link to fiddle

angular.module('directives', []).directive('customLogo', 
    function() {
      return {
        restrict: 'E',
        link: function($scope, element, attrs) {
         var image =  element.find('img');
         image.attr("src","blabla.png");
        }
      };
    }
  );
angular.module('myApp', ['directives']);


<div ng-app="myApp">
   <custom-logo>
      <div>
        <img src="logo.png">
      </div>
  </custom-logo>

</div>

请注意，“blabla.png”可以是您对示波器上的图像文件的引用。例如$scope.image = "src/images/blabla.png" 然后替换

image.attr("src",$scope.image);

AngularJS基本关于指令中的替换内容

2 个答案: