Question

我对我想写的指令有疑问。这是jsfiddle 这是HTML

<div ng-controller="TestCtrl">
    <mydir base="{{absolute}}">
        <div>{{path1}}</div>
        <div>{{path2}}</div>
    </mydir>
</div>

这个名为'mydir'的指令需要base属性的值和所有路径值（可以定义任意数量的路径）。我不想将控制器中的值直接注入指令范围（它们需要是独立的）。我有3个问题（结账jsfiddle也是如此！）

1）虽然代码现在可以正常工作，但是有一个错误：“TypeError：Object＃没有方法'setAttribute'”。有什么建议是错的吗？

2）在指令scope.base中是'undefined'而不是'/ base /'。这可以解决吗？

3）如何在指令中列出所有路径值？

Answer 1

您需要设置一个隔离范围，声明此指令的基本属性：

scope: {
    base: "@"
}

这解决了（2）。

问题（1）是由replace: true与上述scope合作引起的，因为它会创建一个注释节点来包含重复的<div>。

对于（3），将paths: "="添加到范围中，并将ocurse添加到父控制器中作为数组。

请参阅分叉小提琴：http://jsfiddle.net/swYAZ/1/

Answer 2

您正在通过设置scope: true您要执行的操作在指令中创建新范围：

app.directive('mydir', function ($compile, $rootScope) {
    return {
        replace: true,
        restrict: 'E',
        template: '<div ng-repeat="p in paths"> {{base}}{{p}}/{{$index}}</div>',
        scope: {
            base : '='
        },

        link: function (scope, iElement, iAttrs) {
            scope.paths = ['p1', 'p2'] ;
        }
    }
});

这将在您的指令的本地范围和父范围之间建立双向绑定。如果父控制器中的值发生变化，它也会在指令中发生变化。

http://jsfiddle.net/4LAjf/8/

Answer 3

如果您想制作一个强大的指令，以便能够将数据替换为其内容（3）您可以将引用作为属性传递并相应地显示数据。

请参阅此article，查找包装小部件。

AngularJs：创建指令

3 个答案: