Zurb基金会自定义表格 我最近用Zurb基金会开始了一个项目，在那里我用AngularJS创建动态选择表单字段。

除非我想使用Zurb基金会的自定义表单，否则这个例子是有效的。要激活它，我知道我必须将

替换为

，但当我这样做时，使用AngularJS创建的动态选择字段停止工作。静态选择字段不受影响

---

可以使用AngularJS和Zurb基金会的自定义表单吗？如何修复这个简单的例子？

< p>当你在基础中激活自定义表单时，JavaScript修改你的选择元素并给它一个显示风格：没有。然后，select元素被一个可见的div class=“custom dropdown”替换。您在angularjs代码中所做的一切都将丢失

这不是一个解决方案，但我找到了一个非常简单的解决方法。只需将此CSS应用于选择字段：

select {
  display: block;
  position: relative;
  top: 0;
  height: 2.3125em;
  margin-bottom: 1.25em;
  margin-top: 0px;
  padding: 0px;
  width: 100%;
  background: white;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 0.875em;
  vertical-align: top;
}

---

虽然这不是一个真正的解决方案，但它确实解决了我的问题，即当混合样式化输入字段和非样式化选择字段时，表单看起来很奇怪。我希望这是ZURB基金会中的默认行为。

< P>将这个jQuery代码添加到JS文件：

$("#my_select").bind("DOMSubtreeModified", function() {
    $(document).foundation("forms");    
});

这将在每次更改ANGOLARS JS将在选择选项DOM.< /P>中执行自定义窗体的基础脚本。 <> P>这个解决方案的唯一问题是当你通过JS-来改变模型——在基础选择上的显示值-不改变。 为了解决这个问题，我在AngularJS控制器中将$watch添加到这个模型中，并手动更改显示值。 例如：（我的模型是“选定的”）

---

我隐藏表单并显示在这里-以防止坏GUI的方式…

AngularJs和Zurb基金会之间存在很多冲突。 <>我建议离开ZURB基金会并尝试使用Bootstrap

---

请参阅链接：

这为我解决了这个问题，但我觉得这不是一个角度的方式

angular.module('someApp', [''])
  .run(function($rootScope) {
      $("select").bind("DOMSubtreeModified", function() {
          Foundation.libs.forms.refresh_custom_select($("select"), true);
      });
  })

---

您或其他人可能需要启动一个项目来创建基础类的指令，很像角UI（）和角度UI引导（）

是的，我注意到了。您知道如何解决此问题吗？谢谢，但我不知道如何应用您的解决方案。如果您能在以下位置修复这个简单的示例，那就太好了：为什么不将列表保存在ng controller中？我试图将解决方案与您的案例相匹配：我认为“未定义”是由其他问题引起的。。。我不知道这是否与我的问题有关。我现在真的很困惑。我尝试在jsbin.com上创建其他示例，它们总是显示为“未定义”。我不知道出了什么问题。如果您的

select

通过路径加载到

ngView

中，这将不起作用。我认为您最好听听

ngView

中呈现的项目的

$viewContentLoaded

事件

angular.module('someApp', [''])
  .run(function($rootScope) {
      $("select").bind("DOMSubtreeModified", function() {
          Foundation.libs.forms.refresh_custom_select($("select"), true);
      });
  })