Question

我有一个公共控件，它根据传递给它的对象生成输入。我刚刚添加了bootstrap前缀和后缀，工作正常。

我还想添加后缀列表（如果有）。这将允许用户改变输入的单位，即常备费可以是每天便士（'p / day'），最高可达每年英镑（'£/ year'）。我没有4个可选输入，而只想在后缀上添加下拉列表。

所以我发现是否有后缀：

if (scope.model.iSuffix) {

然后如果它是一个数组

if ($.isArray(scope.model.iSuffix)) {

然后我模拟控件并将其全部附加到需要的地方

var suffixGrp = $('<div>');
suffixGrp.attr("class", "input-group-btn");

scope.suffix = scope.model.iSuffix[0];

var suffixBtn = $('<button>');
suffixBtn.attr("type", "button");
suffixBtn.attr("class", "btn btn-secondary dropdown-toggle");
suffixBtn.attr("data-toggle", "dropdown");
suffixBtn.attr("aria-haspopup", "true");
suffixBtn.attr("aria-expanded", "false");
suffixBtn.text('{{suffix}}');

suffixGrp.append(suffixBtn);

var suffixOpts = $('<div>');
suffixOpts.attr("class", "dropdown-menu dropdown-menu-right")

var suffixItem = $('<a>');
suffixItem.attr("class", "dropdown-item");
suffixItem.attr("href", "#");
suffixItem.attr("ng-repeat", "suff in model.iSuffix");
suffixItem.attr("ng-click", "suffix = suff");
suffixItem.text('{{suff}}');

suffixOpts.append(suffixItem);

suffixGrp.append(suffixOpts);

inputGroup.append(suffixGrp);

好的，很酷。我只需编译即可完成：

$compile(inputGroup)(scope);

现在后缀出现在应该的位置，下拉菜单显示在点击等等

唯一的问题是项目ng-click什么都不做。我只想让它更新'scope.suffix'

看起来它已将'suff'的值插值为纯文本。

我试图改变它：

<!-- suffixItem.text('{{suff}}'); -->
suffixItem.html('{{suff}}');

但没有快乐。我错过了什么吗？也许我的'suffix = suff'就是问题？

由于安迪

PS：我会设置jsfiddle来告诉你我的意思。将在准备好后发布

修改这是jsFiddle https://jsfiddle.net/akrd77d3/8/

请注意，我将ng-click事件更改为警报，但不会触发警报。我可以用jQuery事件来调整它，但是我需要吗？

Ta ^ _ ^

Answer 1

由于您的ng-repeat，这是一个范围问题。请在原始代码中尝试此操作：

suffixItem.text("{{suff+':'+suffix}}");

然后点击各种元素;你会看到发生了什么。当您将作业分配到＆＃39;后缀＆＃39;在“点按”中，它会成为重复项目实例的子范围的一部分（并且不再是相同的＆＃39;后缀＆＃39;父项的范围）。

这是使用＆＃39; controllerAs＆＃39;的另一个原因。句法;它减少了这些陷阱的可能性。

麻烦在angular指令中编写和编译元素

1 个答案: