Question

我正在为MEAN堆栈做一个学习项目，我真的陷入了需要帮助的事情。

在实际项目中，我所做的是我有一个表单创建者，可以根据用户需要创建和排列不同的组件，然后类似于此简化示例中使用的指令呈现逐个组件并启用用户填充它。

在这个JSFiddle上，正如我所提到的，有一个简化版本，我使用与我想在项目中使用的方法类似的方法。

我的逻辑是：我创建了一个新数组，其中我在文本框上输入的所有值都是在对格式进行小处理之后存储的，然后我有两个指令可以访问存储数据的工厂函数，循环遍历所有项目并逐个渲染。

我可以看到工厂功能正在工作，并按照我想要的方式创建数据集。

以下是问题的起点：

我像这样调用指令

<render-all-items></render-all-items>

该指令的定义是

.directive('renderAllItems', function (DataServ) {
    return {
        restrict: 'E',
        scope: {},
        link: function (scope, elem, attrs) {
            scope.values = DataServ.currentTemplate.getAllItems();
        },
        template: '<div ng-repeat="item in values">{{item}}<render-item render="item"></renderItem></div>'
    };
});

该指令应该迭代元素列表并逐个渲染它们。单个项目渲染在初始拼写错误修正后正在运行。

模态的输出是：

[[
Item order = and item value =

]]
Item order = and item value =

并且无论阵列上有多少项，它总是相同的输出。

我的主要目标很简单：我应该能够使用文本框添加任意数量的项目，然后当我按下打开模态时，我应该能够看到模态对话框中呈现的元素列表。

我非常感谢指导我做错了，以达到我想要的效果。

提前致谢。

Answer 1

你在这一行上有一个错字：

    <div><pre><render-item render="template.createTemplateItem(textBoxData)"></render-item></pre>

应该是：

    <div><pre><render-item render="template.CreateTemplateItem(textBoxData)"></render-item></pre>

这段代码：

Template.prototype.getAllItems = function () {
    //take a template item object and add it to 
    //the template items repository
    return JSON.stringify(this.items);
};

当链接时，

会被renderAllItems指令调用一次：

link: function (scope, elem, attrs) {
    scope.values = DataServ.currentTemplate.getAllItems();
},

该模板的items数组的所有更改都不会反映在指令中，因为您JSON.stringify表示数组。

https://jsfiddle.net/urq3gu5o/

使用angular指令创建列表和渲染

1 个答案: