Javascript 如何防止jQuery UI按钮集破坏AngularJS绑定？_Javascript_Jquery Ui_Angularjs

Javascript 如何防止jQuery UI按钮集破坏AngularJS绑定？
javascript jquery-ui angularjs
Javascript 如何防止jQuery UI按钮集破坏AngularJS绑定？,javascript,jquery-ui,angularjs,Javascript,Jquery Ui,Angularjs,在下面的代码中，我调用$（“.test”）.buttonset（）的事实正在中断更新{{item.value（）}。我认为这与jQueryUI重写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="Styleshee
在下面的代码中，我调用
$（“.test”）.buttonset（）的事实正在中断更新{{item.value（）}
。我认为这与jQueryUI重写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>


函数ExampleCtrl（$scope，$timeout）{
$scope.list=[
{名称：“a”，值：5}，
{名称：“b”，值：6}，
{名称：“c”，值：5}，
{名称：“d”，值：6}
];
$scope.calc=[
[
{
名称：“a、b平均值”，
值：函数（）{return（$scope.list[0].value+$scope.list[1].value）/2}
},
{
名称：“c，d平均值”，
值：函数（）{return（$scope.list[2].value+$scope.list[3].value）/2}
}
]
];
$timeout（函数（）{
$（“.test”）.buttonset（）；
}, 0);
}
{{item.name}}:{{item.value（）}

{{item.name}}：


下面是一个JSFIDLE版本：
在控制器中操纵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”
在您的情况下，jQueryUI正在转换DOM。它隐藏您的单选按钮并放入其他html元素（重新设置单选组的样式）。单击此新小部件时，JQuery UI代码会传播到相应的编码单选按钮
如果jQueryUI公开了一个事件或类似的东西，那么我们就可以连接到它，从这个角度，您可以调用$scope.$apply（）。但不幸的是，情况似乎并非如此（除非我弄错了）
如果您确实需要jqueryui的外观，您可以编写自己的代码（在jqueryui操作DOM之后复制粘贴特定的HTML片段）。使用jQueryUI中的样式并编写自己的逻辑。Angular使编写自己的逻辑变得非常容易。
在控制器中操作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”
在您的情况下，jQueryUI正在转换DOM。它隐藏您的单选按钮并放入其他html元素（重新设置单选组的样式）。单击此新小部件时，JQuery UI代码会传播到相应的编码单选按钮
如果jQueryUI公开了一个事件或类似的东西，那么我们就可以连接到它，从这个角度，您可以调用$scope.$apply（）。但不幸的是，情况似乎并非如此（除非我弄错了）
如果您确实需要jqueryui的外观，您可以编写自己的代码（在jqueryui操作DOM之后复制粘贴特定的HTML片段）。使用jQueryUI中的样式并编写自己的逻辑。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>


$（“.test”）.buttonset（）//首先允许jQuery UI在此处操作DOM！
函数ExampleCtrl（$scope）{
$scope.list=[…]；
$scope.calc=[…]；
}

更新：正如@Chas.Owens指出的那样，这是行不通的。虽然数据绑定工作正常，但UI已损坏。如果jQueryUI首先修改DOM（如上所示），AngularJS数据绑定可以工作，但它会破坏UI。如果AngularJS首先修改DOM（最初的问题），AngularJS数据绑定不起作用（可能是因为buttonset在标签文本周围添加了一个额外的按钮），但是UI可以工作。让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>


$（“.test”）.buttonset（）//首先允许jQuery UI在此处操作DOM！
函数ExampleCtrl（$scope）{
$scope.list=[…]；
$scope.calc=[…]；
}

更新：正如@Chas.Owens指出的那样，这是行不通的。虽然数据绑定工作正常，但UI已损坏。如果jQueryUI首先修改DOM（如上所示），AngularJS数据绑定可以工作，但它会破坏UI。如果AngularJS首先修改DOM（最初的问题），AngularJS数据绑定不起作用（可能是因为buttonset在标签文本周围添加了一个额外的元素），但是UI可以工作。
这里是我目前拥有的JSFIDLE版本：这里是一个JSFIDLE版本，它实现了我认为您建议的功能：在第一个版本中，buttonset可以工作，但更新并不是这样。在第二种情况下，buttonset不是创建的，而是更新的。下面是一个使用指令的小提琴，buttonset在其中工作。就像我在回答中说的，如果你想更新它，你就必须更新它