Question

我有一个非常简单的＆＃34;目标：我有一种表单创建者，这个指令应该＆＃34;渲染＆＃34;表格的内容。

为此，我创建了一个自定义指令，我计划传递该对象并创建用于渲染槽模板的逻辑。但是，我没有将对象传递给自定义指令

HTML：

<div ng-controller="myController">

    <p>Components starts</p>
    <div ng-repeat="item in items">
        <!-- <p>{{item}}</p> -->
        <my-component obj="item" ></my-component>
    </div>
    <p>Components ends</p>

</div>

JS

angular.module('myApp', [])
.controller('myController', function($scope) {

    $scope.items = [
        { type: 'TextArea', data: 'Somedata1', mandatory: true },
        { type: 'List', data: 'Somedata2', mandatory: false },
        { type: 'Select', data: 'Somedata3', mandatory: true }];

})
.directive('myComponent', function() {
    return {  
        restric: 'E',
        scope: { obj: '=obj' },
        template: '<div> This is the template for {{obj.type}} </div>'
    };
});

我已经使用网络上的不同示例多次制作和更改了代码，但是在2天后我无法使其工作（是的，这是可耻的）

以下是fiddle link

我知道问题是在传递给指令时，因为如果我从ng-repeat中删除了注释标记，则数据显示正确，但如果我尝试使用该指令则不起作用。

拜托，任何人都可以帮助我并解释为什么这不起作用，我错过了什么？

Answer 1

感谢您提供jsfiddle。我不确定没有它我会发现问题。

原来你错误拼写了restrict（你最后没有离开），你需要在视图中省略对scope的引用。< / p>

查看您的更新（和工作）fiddle here。

如何正确地将对象传递给自定义指令？

1 个答案: