angularjs - 角度 ng-checked 干扰基础

Question

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

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

两种情况：

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

我猜这是由于基础添加的额外标记，但它仍然没有多大帮助。

我正在寻找一种方法来获得两者......你们中的任何人都遇到过这个问题吗？

score 1 · Accepted Answer

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

这对于任何客户端 MVC 框架来说都是一个主要的减速带，但请放心，您并不是唯一一个想要实现此类功能的人。

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

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

score 0 · Accepted Answer

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

来自原始博客文章的指令片段

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",
    });
}])

angularjs - 角度 ng-checked 干扰基础

2 回答 2

Related

Reference