AngularJS 使用 Zurb Foundation 自定义表单进行选择答案

【问题标题】：AngularJS select with Zurb Foundation Custom FormsAngularJS 使用 Zurb Foundation 自定义表单进行选择
【发布时间】：2013-10-09 02:48:32
【问题描述】：

我最近在 Zurb Foundation 启动了一个项目，我使用 AngularJS 创建动态选择表单字段。

http://jsbin.com/egizel/1/edit 的示例有效，除非我想使用 Zurb Foundation 的自定义表单。要激活它，我知道我必须用<form class="custom"> 替换<form>，但是当我这样做时，使用AngularJS 创建的动态选择字段停止工作。静态选择字段不受影响。

是否可以使用 AngularJS 和 Zurb Foundation 的自定义表单？如何解决这个简单的例子？

【问题讨论】：

标签： angularjs zurb-foundation

【解决方案1】：

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

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

【讨论】：

如果您的select 通过路由加载到ngView，这将不起作用我认为您最好监听$viewContentLoaded 事件以获取ngView

【解决方案2】：

当您在 Foundation 中激活自定义表单时，javascript 会修改您的 select 元素并为其赋予 display:none 样式。然后选择元素被一个可见的 div class="custom dropdown" 替换。你在 angularjs 代码中所做的一切都会丢失。

【讨论】：

是的，我注意到了。你知道如何解决这个问题吗？

【解决方案3】：

这不是一个解决方案，但我找到了一个非常简单的解决方法。只需将此 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 Foundation 中的默认行为。

【讨论】：

【解决方案4】：

将此 jQuery 代码添加到您的 js 文件中：

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

这将在 AngularJS 在选择选项 DOM 中进行的每次更改后执行自定义表单的基础脚本。

这个解决方案唯一的问题是当你通过js改变模型时——基础选择上的显示值——不改变。

为了解决这个问题，我在 AngularJS 控制器中将 $watch 添加到此模型中 - 并手动更改显示值。例如：（我的模型是'选中'）

$scope.$watch('selected', function() {
    if($scope.selected) //only after AngularJS initial it
        $('#myselect + .custom.dropdown a.current').text($scope.selected);
    $('#my_form').show() // optional - see below ...
});

我隐藏表单并在此处显示 - 以防止出现坏 gui...

【讨论】：

谢谢，但我不明白如何应用您的解决方案。如果您可以在jsbin.com/egizel/1/edit 修复这个简单的示例，那就太好了
为什么不将列表保存在 ng-controller 中？我试图为您的案例提供解决方案：jsbin.com/egizel/12/edit
我认为“未定义”是由其他问题引起的......我不知道它是否与我的问题有关。我现在真的很困惑。我尝试在 jsbin.com 创建其他示例，但它们始终显示为“未定义”。我不知道出了什么问题。

【解决方案5】：

您或其他人可能需要启动一个项目来为 Foundation 类创建指令，类似于 Angular-UI (http://angular-ui.github.io/) 和 Angular-UI-Bootstrap (http://angular-ui.github.io/bootstrap/)

【讨论】：

【解决方案6】：

AngularJs 和 zurb 基础有很多冲突。

我建议离开zurb基础并尝试在bootstrap中使用

查看链接：http://angular-ui.github.io/bootstrap/

【讨论】：