Javascript 动态注入指令

所以我有一个指示：

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
    };
});

angular.module（'mymodule'）。指令（'myNote'，函数（）{
var fnLink=函数（范围、元素、属性）{
log（'in指令'，参数）；
};
返回{
限制：'E'，
模板：[
'',
“{note.content}}”，
''
].join（'\n'），
链接：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);
});

Note.find({
用户：$scope.global.user.\u id，
模块：$scope.module.\u id
}).然后（功能（响应）{
$scope.notes=响应；
angular.forEach（$scope.notes，函数（note）{
$scope.note=注释；
元素。追加（$（''）；
});
$compile（元素）（$scope）；
});

现在HTML被呈现为它应该呈现的样子； 我有两个问题：

fnLink函数未运行

我不知道如何将forEach中的每个音符连接到它自己的指令实例

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

我完全错了吗？
谢谢

您需要使用元素来连接指令。并将$scope传递给它：

$compile(element)($scope);

，但基本上是这样的：

从传递给它的元素开始，遍历它的所有子元素

在每一步中，查看是否有任何指令匹配，并将它们的链接函数设置为使用一个函数调用（即“编译视图”）运行

调用“编译视图”时，将适当的范围传递给每个指令（例如，相同的范围、子范围或隔离的范围）

现在已经接通了

---

编辑：跟进您的问题： 我是不是完全错了

嗯。真的大概很难说没有看到更多的代码

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

快速运行控制器、服务和指令及其用途（非常通用）：

• 指令：
  • 在DOM和作用域之间设置绑定
  • 创建具有功能的可重用视图（部分）
• 服务：
  • 用于封装共享逻辑
  • 用于管理共享数据
• 控制器：
  • 用于设置视图的“业务逻辑”
  • 为视图准备模型

指令更多的是Angular的“内部工作”。你可以在指令中做很多事情，在指令中很容易混淆你的顾虑。最好尽量使它们简单明了，切中要害。例如，一个可重用的分部，它只是一个模板和一个控制器。或者只是一个链接函数的绑定指令

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

这是紧密耦合的： 让我用代码中表示的关注点来注释您自己的代码：

//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);
});

---

但是，我不知道你到底想做什么。。。所以我给出这个建议只是希望它能有所帮助。

经过几个小时的调查，我找到了这个问题的解决方案
帮了我很多。
我需要使用Angular指令的隔离作用域。下面是它的工作原理：

//READER Directive
var initNotes = function($scope, Note, element, $compile){
    Note.find({
        user: $scope.global.user._id,
        module: $scope.module._id
    }).then(function(response) {
        $scope.notes = response;
        angular.forEach($scope.notes, function(note){
            var highlighted = element.find('span.highlighted');
            var html = '<my-note _id="'+note._id+'" content="'+note.content+'"></my-note>';
            highlighted.after($compile(html)($scope));
        });
    });
};

//NOTES Directive
angular.module('oowli').directive('myNote', function() {

    var fnLink = function($scope, element, attrs){
        element.on('keydown', '.note span', noteKeyDown($scope));
        element.on('click', '.edit', editClick($scope));
        element.on('click', '.remove', removeClick($scope));
    };

    return {
        restrict: 'E',
        template: [
            '<div class="note" data-id="{{id}}">',
                '<div class="note-buttons">',
                    '<a href="#" class="glyphicon glyphicon-pencil edit"></a>',
                    '<a href="#" class="glyphicon glyphicon-remove remove"></a>',
                '</div>',
                '<span>{{content}}</span> ',
            '</div>'
        ].join('\n'), 
        scope: {
            id: '=_id',
            content: '@content'
        },
        link: fnLink
    };
});

//读卡器指令
var initNotes=函数（$scope、Note、element、$compile）{
注意，查找({
用户：$scope.global.user.\u id，
模块：$scope.module.\u id
}).然后（功能（响应）{
$scope.notes=响应；
angular.forEach（$scope.notes，函数（note）{
var highlighted=element.find（'span.highlighted'）；
var html=''；
突出显示。在（$compile（html）（$scope））之后；
});
});
};
//NOTES指令
angular.module（'oowli'）。指令（'myNote'，function（）{
var fnLink=函数（$scope，element，attrs）{
元素.on（'keydown'，'note span'，noteKeyDown（$scope））；
元素上（'click'，'edit'，editClick（$scope））；
元素上（'click'，'remove'，removeClick（$scope））；
};
返回{
限制：'E'，
模板：[
'',
'',
'',
'',
'',
{{content}}，
''
].join（'\n'），
范围：{
id:“=\U id”，
内容：“@content”
},
链接：fnLink
};
});

---

作为指令属性传递的内容映射到myNote指令中的范围。

我在foreach之后这样做，但您没有将范围传递给itok，您是对的。现在，当我重新加载页面时，它不断重复地执行链接功能，使我浏览的页面崩溃。添加的更多信息可能有助于您理解它在做什么。快乐编码。酷，我现在知道了。我对父元素而不是新元素调用$compile，所以是无限循环。如果您可以创建JSFIDLE/plunkr或显示code for container指令，帮助会更容易@布莱什的回答应该能解决你的问题。

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

//READER Directive
var initNotes = function($scope, Note, element, $compile){
    Note.find({
        user: $scope.global.user._id,
        module: $scope.module._id
    }).then(function(response) {
        $scope.notes = response;
        angular.forEach($scope.notes, function(note){
            var highlighted = element.find('span.highlighted');
            var html = '<my-note _id="'+note._id+'" content="'+note.content+'"></my-note>';
            highlighted.after($compile(html)($scope));
        });
    });
};

//NOTES Directive
angular.module('oowli').directive('myNote', function() {

    var fnLink = function($scope, element, attrs){
        element.on('keydown', '.note span', noteKeyDown($scope));
        element.on('click', '.edit', editClick($scope));
        element.on('click', '.remove', removeClick($scope));
    };

    return {
        restrict: 'E',
        template: [
            '<div class="note" data-id="{{id}}">',
                '<div class="note-buttons">',
                    '<a href="#" class="glyphicon glyphicon-pencil edit"></a>',
                    '<a href="#" class="glyphicon glyphicon-remove remove"></a>',
                '</div>',
                '<span>{{content}}</span> ',
            '</div>'
        ].join('\n'), 
        scope: {
            id: '=_id',
            content: '@content'
        },
        link: fnLink
    };
});