Question

我是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

有什么想法吗？谢谢！

Answer 1

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

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

Answer 2

进一步展望我找到了解决问题的可能方法。它与Plunker提出的非常类似，只是语法略有变化。这个适合我，但我不明白为什么Plunker提出的不是。

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

Answer 3

指令可能变得非常复杂。知道你的最终目标会得到更好的答案，但这是你提出要求的最简单方法：

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

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

3 个答案: