javascript - 理解 Angular Directive(指令)

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 中，我有以下内容(jade 模板)

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') 放入我的指令中，但它似乎没有被调用。有什么想法吗？提前致谢。

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;