Angular passing parameters to a directive

I have the following HTML, running the following directive. I need to pass the loop parameter to the directive template. But for some reason its not working. Why?

我有以下HTML,运行以下指令。我需要将loop参数传递给指令模板。但由于某种原因,它不起作用。为什么?

HTML

<ul>
    <list-element loop></list-element>
</ul>

ANGULAR

angular.module('myApp', []).directive('listElement', function(){
    return {
        templateUrl: 'list-element.html',
        scope: {},
        link: {
            scope.loop : vm.list
        }
    };
});

TEMPLATE

<li ng-repeat="(slug, label) in loop">
    <strong>{{ slug }}</strong> - {{ label }}
</li>

3 个解决方案

#1

I think what you want is:

我想你想要的是:

HTML:

<ul>
    <list-element loop="vm.list"></list-element>
</ul>

Angular:

angular.module('myApp', []).directive('listElement', function(){
    return {
        templateUrl: 'list-element.html',
        scope: {
            loop: '='
        }
    };
});

I'm guessing on the loop="vm.list" thing because I don't know about the rest of the code. But the idea is that you want to pass the object as an attribute named 'loop'.

我在关于loop =“vm.list”的事情,因为我不知道其余的代码。但想法是你想要将对象作为名为'loop'的属性传递。

#2

Isolated scope two way binding is done as below:

隔离范围双向绑定如下所示:

scope:{
    loop:'='
}

You may go through the angular developer guide here

您可以在此处查看角度开发人员指南

#3

Try this

HTML

<ul>
   <list-element loop ></list-element>
</ul>

Angular Directive

angular.module('myApp', []).directive('listElement', function(){
return {
    templateUrl: 'list-element.html',
    scope: {
    },
    link: function (scope) {
        scope.loop = vm.list
    }
};
});