angularjs具有自定义属性的自定义指令

angularjs custom directive with custom attributes

本文关键字：自定义 指令 自定义属性 angularjs      更新时间：2023-09-26

我是angularjs的新手，不知道这是否可能，也不知道如何实现。我想创建一个带有控制器的自定义指令，该控制器使用通过属性传递给它的信息。这是我想要实现的一个非工作示例：

HTML应该看起来像：

<div ng-app="test">
    <custom-directive attr1="value1" attr2="value2"></custom-directive>
</div>

js:

   var app = angular.module('test', [ ]);
    app.directive("customDirective", function(){
        return {
            restrict: 'E',
            scope: ???,
            controller: function(){
                console.log("print attributes value: " + attr1 + ", " +  attr2 );
            }
        }
    };
});

预期控制台输出应该是：

打印属性值：value1，value2

知道吗？谢谢

在指令中，您可以定义要访问和使用的范围对象（属性），如下所示：

app.directive("customDirective", function(){
    return {
        restrict: 'E',
        scope: {attr1: "=", attr2: "="},
        link: function(scope, elem, attr){
            console.log("print attributes value: " + attr.attr1 + ", " +  attr.attr2 );
        }
    };

您可以使用不同类型的绑定：

  • =用于双向绑定
  • @只读取值（单向绑定）
  • &用于绑定函数

有关详细信息，请参阅以下链接：http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

进一步看，我发现了这个可能的问题解决方案。它与Plunker提出的非常相似，只是在语法上略有变化。这一个对我有效，但我不明白为什么普朗克提出的不。

app.directive('customDirective', function(){
    return {
        compile: function() {
            return {
                pre: function(scope, element, attributes) {
                    console.log("Value: " + attributes.attr1 + attributes.attr2);
                }
            };
        }
    }
});

指令可能会变得相当复杂。知道你的最终目标会得到更好的答案，但这是实现你所要求的最简单的方法：

var app = angular.module('test', []);
app.directive("customDirective", function(){
    return {
        link: function(scope, el, attr){
            console.log("print attributes value: " + attr.attr1 + ", " +  attr.attr2 );
        }
    }
});

Plunker

相关文章：