Question

由于角度和基础之间的干扰，我正面临一个错误。

基本上，我只是复制粘贴的the example provided in the doc：

Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">

两种情况：

当我有$(document).foundation();时：设计不错，示例不起作用
当我评论$(document).foundation();时：没有更多的基础善良，示例有效

我想这是由于基金会增加了额外的标记，但仍然没有多大帮助。

我正在寻找一种方法来解决这两个问题...你们中有谁遇到过这个问题？

Answer 1

你不能在Angular驱动的DOM上调用像.foundation()这样的库初始化器，因为在Angular创建它们之前DOM元素实际上不存在。

这是任何客户端MVC框架的主要速度提升，但请放心，您并不是唯一想要实现此类功能的人。

使用Foundation with Angular的正确方法是将其小部件包装在Directives中。

以下是一些可以帮助您的资源：

Answer 2

您可以创建自定义指令，而不是使用ng-checked，它将处理基金会的其他标记。它可能不是空闲的方式，但它会解决你的问题，因为它对基础实现等了解太多。

来自original blog post

的指令摘录

directive('ngCheckedFoundation',['$timeout', function($timeout) {
    function markCheckBox(value, scope, element, attr) {
        //timeout to avoid the foundation javascript action changed by this directive
        $timeout(function() {
                if(value) {
                    attr.$set("checked", true);
                    element.next().addClass('checked');
                }
                else {
                    attr.$set("checked", false);
                    element.next().removeClass('checked');
                }
        }, 200);
    }

    function link (scope, element, attr, ctrl) {
        scope.$watch(attr["ngCheckedFoundation"], function(n,o) {
          if(n != o) {
            markCheckBox(n, scope, element, attr);
          }
        });
        markCheckBox(scope.$eval(attr.ngCheckedFoundation), scope, element, attr);
    }

    return({
        link: link,
        restrict: "A",
    });
}])

角度ng检查干扰基础

2 个答案: