javascript - 即时注入(inject)指令

Question

所以我有一个指令:

angular.module('mymodule').directive('myNote', function() {
    var fnLink = function(scope, element, attrs){
        console.log('in directive', arguments);
    };

    return {
        restrict: 'E',
        template: [
            '<div class="note" data-id="{{note._id}}">',
                '<span>{{note.content}}</span> ',
            '</div>'
        ].join('\n'), 
        link: fnLink
    };
});

并且在另一个指令中，它管理将出现这些“注释”的容器:

Note.find({
    user: $scope.global.user._id,
    module: $scope.module._id
}).then(function(response) {
    $scope.notes = response;
    angular.forEach($scope.notes, function(note){
            $scope.note = note;
        element.append($('<my-note>'));
    });
    $compile(element)($scope);
});

现在 HTML 正在按其应有的方式呈现； 我有两个问题:

1. fnLink 函数未运行，
2. 我不知道如何将 forEach 中的每个注释连接到其自己的指令实例

更新 按照代码的设置方式，呈现的每个注释都将绑定(bind)到 $scope.notes 数组中的最后一个注释。我怎样才能使它们变得个性化？

我的做法完全错误吗？
谢谢

Answer 1

您需要$compile连接指令的元素。并将 $scope 传递给它:

$compile(element)($scope);

I wrote a blog entry a while back on how $compile works ，但基本上它是这样做的:

1. 从传递给它的元素开始，遍历它的所有子元素。
2. 在每一步中查看是否有任何指令匹配，并设置它们的链接函数以通过一个函数调用(您的“编译 View ”)运行。
3. 调用“编译 View ”时，将适当的作用域传递给每个指令(例如相同作用域、子作用域或独立作用域)。
4. 现在已连线。

---

编辑:跟进您的问题:

am I approaching this completely wrong?

嗯。诚实地？或许？如果没有看到更多代码，很难说。

从我读到的内容来看，您似乎有“管理笔记”的嵌套指令。一般来说，这可能是错误的方法。

快速了解 Controller 、服务和指令及其用途(非常一般):

• 指令:
  • 设置 DOM 和 Scope 之间的绑定(bind)。
  • 创建具有功能的可重用 View (部分 View )。
• 服务:
  • 用于封装共享逻辑。
  • 用于管理共享数据。
• Controller :
  • 用于设置 View 的“业务逻辑”。
  • 为 View 准备模型。

指令更多的是 Angular 的“内部运作”。您可以在指令中做很多事情，并且很容易在指令中混淆您的关注点。最好尽量使它们简单明了。例如，可重用的部分只是一个模板和一个 Controller 。或者只是一个链接函数的绑定(bind)指令。

您可能应该管理服务指令之间的“注释”。您甚至可以将该服务注入(inject)到您的指令中，但它允许您将该关注点与您的指令分开，以使所有内容都更易于测试。

这里是非常紧密耦合的:

让我用其中所代表的问题来注释您自己的代码:

//In a directive, so DOM and model

// Data Access
Note.find({
    // Model
    user: $scope.global.user._id,
    module: $scope.module._id
}).then(function(response) {

    // Model
    $scope.notes = response;

    // DOM Manipulation
    angular.forEach($scope.notes, function(note){
        // Model
        $scope.note = note;

        // Manual DOM manipulation
        element.append($('<oowli-note>'));
    });

    // Manual call to $compile
    $compile(element)($scope);
});

.. 一切都在一个指令中，正如我上面提到的，这应该限制它的关注点。所以基本上，如果你去测试这个指令，你将要处理

使用中继器可能会更好？

<oowli-note ng-repeat="note in notes"/>

然后通过服务调用在 Controller 中获取注释？

app.controller('NoteCtrl', function($scope, Note) {
    Note.find($scope.x, $scope.y).then(function(notes) {
       $scope.notes = notes;
    });
});

但是，我不知道您实际上想要实现什么......所以我只是提供这个建议，希望它有所帮助。