1

我正在使用 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 确实有效并返回正确的图像 URL，因为我之前使用img(ng-src='{{flags.imgSrc}}').

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

4

2 回答 2

1

那是因为为了方便起见，您需要将指令重命名为ngBackgroundAngular 将蛇形大小写转换为骆驼大小写。

例子：

.directive('ngBackground')

HTML

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

普通示例

App.directive('myAmazingDirective');

HTML

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

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

var url = attrs.ngBackground;
于 2013-09-14T22:24:47.027 回答
0

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

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

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

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

于 2013-09-14T22:25:04.767 回答