Question

我的HTML：

<div ng-controller="myController as ctrl">                    
    <div id='slider-children'></div>
    <br/>
    <br/>
    <input type="text" ng-model="ctrl.one">
    <input type="text" ng-model="ctrl.second">
 </div>

Angular部分：

angular.module('myApp',[]).controller('myController',myController);
 function myController() {
    var self=this;
    $("#slider-children").slider({
        min: 0,
        max: 99,
        range:true,
        values: [10, 20],
        change: function ( event, ui ) {
            self.one=ui.values[0];
            self.second=ui.values[1];
            console.log(self.one);
            console.log(self.second);
        }
        });     
 }

当我滑动jQuery UI滑块时，有人可以解释为什么输入文本do not upgrade，而 ctrl.one 和 ctrl.second 具有正确的值？他们有时只升级！ 我做错了什么？

Answer 1

我们无法在angular中使用完整的JQuery功能。

有两种替代解决方案

1.您可以将值分配到jquery的文本框中，然后将以下代码放入html页面。当我们通过javascript / jquery

更新值时，它会自动将值从文本框绑定到角度模块

 <script type="text/javascript">
        !function (n, t) { "use strict"; var r = n.fn.val; n.fn.val = function (n) { if (!arguments.length) return r.call(this); var e = r.call(this, n); return t.element(this[0]).triggerHandler("input"), e } }(window.jQuery, window.angular);
    </script>

2.你可以使用Angular幻灯片代替Jquery http://angular-slider.github.io/angularjs-slider/

ng-model不从jQuery Slider更新

1 个答案: