使用 AngularJS 创建自定义属性答案

【问题标题】：Creating a custom attribute with AngularJS使用 AngularJS 创建自定义属性
【发布时间】：2014-09-16 00:47:36
【问题描述】：

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

<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?
        }
      ]
    }
  }
]);

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

谢谢！

【问题讨论】：

标签： javascript css angularjs

【解决方案1】：

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

Codepen：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);
      }
    }
  }
);

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

Codepen：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);
      }
    }
  }
);

【讨论】：

【解决方案2】：

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

$attrs.effectColor // #2D2F2A

来自文档：

attrs 是具有标准化属性的键值对的哈希对象名称及其对应的属性值。

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

DEMO

【讨论】：

【解决方案3】：

好像是How to get attribute value of a custom tag in angularjs?的复制品

我认为您需要在指令的定义中使用类似 scope: { data: "=data" } 的内容

【讨论】：

我看到的一切都集中在一个元素上。我正在尝试创建一个直接的自定义属性。

【解决方案4】：

请看这里：http://jsfiddle.net/MP8ch/

<div ng-app="app">
    <div ng-controller="firstCtrl">
        <div effect-color="#fc9696">
            <P>content here</P>
        </div>
    </div>
</div>

JS：

 var app = angular.module('app', []);
    app.directive('effectColor', function () {
        return {
            restrict: 'AE',
            transclude: true,
            // replace:'true',
            scope: {
                color: '@effectColor'
            },
            restrict: 'AE',
            template: '<div style="background-color:{{color}}" ng-transclude></div>'
        };
    });


    app.controller('firstCtrl', function ($scope) {


    });

【讨论】：

【解决方案5】：

您可以创建一个隔离范围并将属性绑定到它：

myApp.directive('effectColor', [

function () {
    return {
        restrict: 'A',
        scope: {
            effectColor: '='
        },
        link: function (scope, element, attrs) {
            element.css({
                color: scope.effectColor
            });
        },
        controller: [
            '$scope', '$element', '$attrs', '$location',

        function ($scope, $element, $attrs, $location) {
            console.log($scope.effectColor);
        }]
    }
}]);

http://jsfiddle.net/R7Rb6/

【讨论】：

【解决方案6】：

这是一个以自身为属性的指令场景。请参阅here，了解如何在指令中真正获得价值。

【讨论】：