使用 AngularJS 创建自定义属性

Question

我是 AngularJS 的新手。我正在尝试编写一个指令，该指令将根据某些情况设置background-colora <div>。本质上，在我看来，我希望能够编写以下代码：

<div effect-color="#2D2F2A">content here</div>

或者

<div effect-color="{{effectColor}}">content here</div>

我知道我需要一个指令。目前，我正在这样做：

.directive('effectColor', [
  function () {
    return {
      restrict: 'A',
      controller: [
        '$scope', '$element', '$attrs', '$location', 
        function ($scope, $element, $attrs, $location) {
          // how do I get the value of effect-color here?
        }
      ]
    }
  }
]);

我不确定如何获取属性本身的值。我需要添加范围吗？我只想要属性值。

谢谢！

Answer 1

$attrs您可以使用参数对象获取指令控制器中的值

$attrs.effectColor // #2D2F2A

来自文档：

attrs是一个哈希对象，具有规范化属性名称及其对应属性值的键值对。

另外，如果您要修改 DOM（在您的情况下应用背景颜色），您应该使用link选项。

演示版

Answer 2

这里有两种方法......首先通过查看指令的元素属性值来获取属性值。第二个传递属性值并附加到指令的隔离范围。请注意，我已将您的控制器替换为链接功能。我建议你阅读这篇文章：https : //docs.angularjs.org/guide/directive

代码笔：http ://codepen.io/anon/pen/cGEex

HTML：

<div ng-app="myApp">
  <div effect-color-one="#123456"></div>
  <div effect-color-two="#123456"></div>
</div>

JavaScript：

angular.module('myApp', [])
.directive('effectColorOne', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        console.log('example 1: ' + attrs.effectColorOne);
      }
    }
  }
)
.directive('effectColorTwo', function () {
    return {
      restrict: 'A',
      scope: {
        effectColorTwo: '@'
      },
      link:function (scope) {
        console.log('example 2: ' + scope.effectColorTwo);
      }
    }
  }
);

另一个例子 结合了上面的例子和改变指令属性所在元素的背景颜色的能力如下：

代码笔：http ://codepen.io/anon/pen/HospA

HTML：

<div ng-app="myApp">
  <div effect-color="red">Hello</div>
</div>

JavaScript：

angular.module('myApp', [])
.directive('effectColor', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.css('background-color', attrs.effectColor);
      }
    }
  }
);