如何防止 jQuery-UI 按钮集破坏 AngularJS 绑定

How can I prevent jQuery-UI buttonsets from breaking AngularJS bindings?

本文关键字：AngularJS 绑定 何防止 jQuery-UI 按钮      更新时间：2023-09-26

在下面的代码中，我调用$(".test").buttonset();的事实破坏了{{ item.value() }}的更新。 我认为这与jQuery UI重写DOM有关。

<html ng-app>
    <head>
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
        <script type="text/javascript">
            function ExampleCtrl($scope, $timeout) {
                $scope.list = [
                    { name: "a", value: 5 },
                    { name: "b", value: 6 },
                    { name: "c", value: 5 },
                    { name: "d", value: 6 }
                ];
                $scope.calc = [
                    [
                        {
                            name: "a, b avg",
                            value: function() { return(($scope.list[0].value + $scope.list[1].value) / 2) }
                        },
                        {
                            name: "c, d avg",
                            value: function() { return(($scope.list[2].value + $scope.list[3].value) / 2) }
                        }
                    ]
                ];
                $timeout(function() {
                    $(".test").buttonset();
                }, 0);
            }
        </script>
    </head>
    <body ng-controller="ExampleCtrl">
        <div class="test" ng-repeat="group in calc">
            <div ng-repeat="item in group">
                <input type="radio" name="a" id="{{item.name}}" />
                <label for="{{item.name}}">{{item.name}}: {{ item.value() }}</label>
            </div>
        </div>
        <ul ng-repeat="item in list">
            <li>{{item.name}}: <input type="number" ng-model="item.value" />
        </ul>
    </body>
</html>

这是一个jsFiddle版本：http://jsfiddle.net/vhLXW/

控制器

中的 Dom 操作不是一个好主意。你可以做的是创建一个简单的指令，它将为你做 buttonset（） 工作。它看起来像

directive('buttonset', function() {
    return function(scope, elm, attrs) {
      elm.buttonset();
    };
  });

在你的html中，你可以做

<div class="test" ng-repeat="group in calc" buttonset>

现在，您的代码不依赖于 html 中是否存在 class="test"。

在你的情况下，JQuery UI正在改变DOM。它隐藏了您的单选按钮并放入其他html元素（重新设计单选按钮组）。单击此新小部件时，JQuery UI 代码会将该单击传播到相应的单选按钮。

如果 JQuery UI 公开了一个事件或类似的东西，那么我们可以挂接到它，从 Angular 你可以调用 $scope.$apply(); .但是，不幸的是，情况似乎并非如此（除非我弄错了）。

如果你真的需要JQuery UI的外观，你可以编写自己的代码（在JQuery UI操作DOM之后复制粘贴特定的HTML）。使用 JQuery UI 中的样式并编写自己的逻辑。Angular 使编写自己的逻辑变得非常容易。

让 jQuery UI 先修改 DOM，然后让 AngularJS 进行 DOM 操作。 这样，Angular 将绑定到修改后的 DOM 元素。我把你的JavaScript放在页面的底部，让它在不需要超时的情况下工作：

</body>
<script type="text/javascript">
    $(".test").buttonset()  // allow jQuery UI to manipulate the DOM here, first!
    function ExampleCtrl($scope) {
        $scope.list = [ ... ];
        $scope.calc = [ [...] ];
    }
</script>

更新：正如@Chas.Owens指出的那样，这是行不通的。 尽管数据绑定工作正常，但 UI 已损坏。 如果看起来如果jQuery UI首先修改DOM（如上所示），AngularJS数据绑定可以工作，但它以某种方式破坏了UI。 如果 AngularJS 首先修改 DOM（原始问题），AngularJS 数据绑定不起作用（可能是因为 buttonset 在标签文本周围添加了额外的<跨度>），但 UI 可以工作。

相关文章：