javascript 使用 AngularJS 创建自定义属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24934127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a custom attribute with AngularJS
提问by user3284007
I'm new to AngularJS. I'm trying to write a directive that will set the background-colorof a <div>based on some scenario. Essentially, in my view, I want to be able to write this code:
我是 AngularJS 的新手。我正在尝试编写一个指令，该指令将根据某些情况设置background-colora <div>。本质上，在我看来，我希望能够编写以下代码：
<div effect-color="#2D2F2A">content here</div>
or
或者
<div effect-color="{{effectColor}}">content here</div>
I know I need a directive. Currently, I'm doing this:
我知道我需要一个指令。目前，我正在这样做：
.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?
}
]
}
}
]);
I'm not sure how to get the value of the attribute itself. Do I need to add a scope? I just want the attribute value.
我不确定如何获取属性本身的值。我需要添加范围吗？我只想要属性值。
Thank you!
谢谢！
回答by Andrew
Here are two methods... First gets the attribute value through looking at the elements attribute value of your directive. The second gets passed the attribute value and attached to the isolated scope of your directive. Please note I have replaced your controller with a linking function. I suggest you give this article a read: https://docs.angularjs.org/guide/directive
这里有两种方法......首先通过查看指令的元素属性值来获取属性值。第二个传递属性值并附加到指令的隔离范围。请注意，我已将您的控制器替换为链接功能。我建议你阅读这篇文章：https: //docs.angularjs.org/guide/directive
Codepen: http://codepen.io/anon/pen/cGEex
代码笔：http://codepen.io/anon/pen/cGEex
HTML:
HTML：
<div ng-app="myApp">
<div effect-color-one="#123456"></div>
<div effect-color-two="#123456"></div>
</div>
JavaScript:
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);
}
}
}
);
Another examplecombining the above example and the ability to change the background colour of the element which the directive attribute resides is below:
结合上述示例和更改指令属性所在元素的背景颜色的能力的另一个示例如下：
Codepen: http://codepen.io/anon/pen/HospA
代码笔：http://codepen.io/anon/pen/HospA
HTML:
HTML：
<div ng-app="myApp">
<div effect-color="red">Hello</div>
</div>
JavaScript:
JavaScript：
angular.module('myApp', [])
.directive('effectColor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.css('background-color', attrs.effectColor);
}
}
}
);
回答by Rahil Wazir
You can get the value in your directive controller using $attrsparameter object
您可以使用$attrs参数对象获取指令控制器中的值
$attrs.effectColor // #2D2F2A
From the docs:
从文档：
attrsis a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
attrs是一个散列对象，具有规范化的属性名称及其对应的属性值的键值对。
Also if you are going to modify the DOM (in your case applying background color) you should use linkoption.
此外，如果您要修改 DOM（在您的情况下应用背景颜色），您应该使用link选项。
回答by manuBriot
Seems like a duplicate of How to get attribute value of a custom tag in angularjs?
似乎是如何在 angularjs 中获取自定义标签的属性值的副本？
I think you need something like scope: { data: "=data" } in the definition of your directive
我认为您在指令的定义中需要类似 scope: { data: "=data" } 的内容
回答by sylwester
Please see here :http://jsfiddle.net/MP8ch/
请看这里：http: //jsfiddle.net/MP8ch/
<div ng-app="app">
<div ng-controller="firstCtrl">
<div effect-color="#fc9696">
<P>content here</P>
</div>
</div>
</div>
JS:
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) {
});
回答by akonsu
You can create an isolate scope and bind the attribute to it:
您可以创建一个隔离范围并将属性绑定到它：
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);
}]
}
}]);
