0

我在一个电子商务网站上工作，并使用 Angular 在产品详细信息页面上构建一个小部件。对于浏览器最初呈现为 HTML 的内容，我的控制非常有限。我的小部件需要完成的大部分工作都按预期工作。add to cart我有 Angular 的表达式插值影响表单的副作用。每种产品的颜色变化都将呈现到页面上HTMLOptionElement，其innerText值如下所示：

{{hex="000000";sizes=["S","M","L","XL","2XL"];name="Black";}}或
{{hex="FFFFFF";sizes=["S","M","L"];name="White";}}或
{{hex="323C88";sizes=["S","M","L","XL","2XL"];name="Royal";}}

Angular 初始化过程的最终结果是这些中的每一个都转换为以下内容：

Black或
White或
Royal分别

这很好，因为这允许用户为其颜色选择提供可读值。副作用是父HTMLFormElement级不再通过提交按钮提交。它的 class 属性已更改为 includeng-pristine和ng-valid。

请注意，在页面加载之前，我无法更改此表单的 HTML。

我确信我可以拼凑一个简单的覆盖来让表单提交，但我正在寻找更多关于插入 Angular 初始化的信息。到目前为止，我能想到的最好的方法是将表单包装ng-non-bindable在 java 模板中：

<div ng-non-bindable>${MyAddToCartFormRendersHere}</div>

但是，我需要一种$interpolate在页面加载后自己进行调用的方法。

这可行，但我敢打赌有更好的方法。

AngularApp.directive("customInterpolation", function ($interpolate, $document) {
$document.find("option:contains('{{')").each(function(i,el){
    var angEl = angular.element(el);
    angEl.text($interpolate(angEl.text(),true));
});

然后表单包装器变为：

<div ng-non-bindable data-custom-interpolation>${MyAddToCartFormRendersHere}</div>

我的指令将运行一次，但由于 nonBindable 指令，返回任何东西（例如链接函数）都是无用的。... 一定有更好的方法。

这是一个jsfiddle来更好地说明这个问题。ngNonBindable请注意，除非指令应用于周围，否则表单不会提交<div>。

4

1 回答 1

0

编写一个带有 compile 函数的指令，该函数查找form并修改action属性以包含?. 该指令的 compile 函数将在 Angular 编译表单之前执行。

HTML：

<div modify-action>
  <form class="product-border product-gap addtocart" method="post" action="">

指示：

myApp.directive('modifyAction', function() {
    return {
        compile: function(element) {
            var form = element.find('form');
            console.log(form);
            form.attr('action', '?');
            console.log(form);
        }
    }
});

小提琴。当您点击提交时，您会看到表单已提交。

于 2013-03-22T20:31:48.510 回答