Question

我是AngularJS的新手。我试图编写一个指令，根据某种情况设置background-color的{{1}}。基本上，在我看来，我希望能够编写这段代码：

<div>

或

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

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

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

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

谢谢！

Answer 1

您可以使用$attrs参数对象

在指令控制器中获取值

$attrs.effectColor // #2D2F2A

来自文档：

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

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

DEMO

Answer 2

以下是两种方法...首先通过查看指令的elements属性值来获取属性值。第二个传递属性值并附加到指令的隔离范围。请注意我已经用链接功能替换了你的控制器。我建议您阅读本文：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);
      }
    }
  }
);

Answer 3

似乎是How to get attribute value of a custom tag in angularjs?

的副本

我认为你需要像范围这样的东西：{data：＆＃34; = data＆＃34;在你的指令

的定义中

Answer 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) {


    });

Answer 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/

Answer 6

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

使用AngularJS创建自定义属性

6 个答案: