Question

我正在使用Angular.JS版本1.1.5，我使用我在stackoverflow上找到的以下代码来更改div的背景图像：

angular.module('app', [])
.directive('ng-background', function(){
  return function(scope, element, attrs){
    var url = attrs['ng-background'];
    element.css({
      'background-image': 'url(' + url +')',
      'background-size' : 'cover'
    });
  };
});

然后，在我的HTML中，我有以下（玉模板）

html(ng-app)
  div(ng-controller='myCtrl')
    div.big-image(ng-background='{{flags.imgSrc}}')

现在，请考虑flags.imgSrc确实有效并返回正确的图片网址，因为我之前使用img(ng-src='{{flags.imgSrc}}')对其进行了测试。

问题在于它似乎根本不起作用！我试图在我的指令中放入一个console.log('test')，但它似乎没有被调用。有什么想法吗？提前谢谢。

Answer 1

这是因为为方便起见，您需要将指令重命名为ngBackground Angular将 snake-case 重命名为 camelCase 。

示例：

.directive('ngBackground')

HTML

div.big-image(ng-background='{{flags.imgSrc}}')

正常示例

App.directive('myAmazingDirective');

HTML

<div my-amazing-directive></div>

此外，您还必须使用 camelCase 来获取属性。

var url = attrs.ngBackground;

Answer 2

您的指令可能永远不会被调用。对于一个名为“ng-background”的指令，我甚至不确定你会怎么称呼它。通常，该指令的驼峰式名称将转换为您在HTML中使用的虚线名称。

引用AngularJS官方文档中的示例。他们创建了一个名为myCurrentTime的指令，并通过以下方式调用它：

<span my-current-time="format"></span>

请查看此页面上的“编写指令（简短版本）”：http://docs.angularjs.org/guide/directive

理解角度指令

2 个答案: