Question

我正在将jquery-ui滑块变成指令并在滑动滑块时使其工作，它会更新模型。

但是，我正在尝试这样做，当你还有一个输入框并输入值时，它会更新ui滑块本身。

我从之前的堆栈溢出线程中得到了这个问题

<div ng-app="myApp">
    <div ng-controller="SomeController">
        Price: {{price}}
        <div slider config="sliderConfig" model="price" class="cdbl-slider"></div>
        <input type="input" ng-model="price">
    </div>
</div>

JS

var myApp = angular.module("myApp", []);

myApp.controller("SomeController", function($scope) {
    $scope.sliderConfig = {
        min: 50,
        max: 500,
        step: 1
    }

    $scope.price = 50;

    $scope.setPrice = function(price) {
        $scope.price = price;    
    }
});

    myApp.directive("slider", function() {
        return {
            restrict: 'A',
            scope: {
                config: "=config",
                price: "=model"
            },
            link: function(scope, elem, attrs) {
                var setModel = function(value) {
                    scope.model = value;   
                }

                $(elem).slider({
                    range: false,
                    min: scope.config.min,
                    max: scope.config.max,
                    step: scope.config.step,
                    slide: function(event, ui) { 
                        scope.$apply(function() {
                            scope.price = ui.value;
                        });
                    }
                });
            }
        }
    });

您可以看到更新输入值的时间 - 滑块不会转到键入的值。因此，我尝试将更改方法添加到滑块，其属性与幻灯片相同，并使用$ apply将ui.value设置为scope.value，但这不起作用。我还尝试了一个$ watch函数，只要ng-model发生了变化，就会更新ui值，但这也无效。

有什么想法吗？

Answer 1

我添加了一个$ watch功能，可以看到＆＃39;价格＆＃39;在指令中的link函数中。然后我只使用$（elem）.slider（＆＃39; value＆＃39;，scope.price）来设置值。

Answer 2

Here's an inline link. Its working and you can check
http://jsfiddle.net/suyog/xfouvdwh/

＆＃13;

var myApp = angular.module("myApp", []);
myApp.controller("SomeController", function($scope) {
    $scope.sliderConfig = {
        min: 50,
        max: 500,
        step: 1     
    }     
    $scope.price = 50;
});

myApp.directive("slider", function() {
    return {
        restrict: 'AE',
        scope: {
            config: "=config",
            price: "=model"
        },
        link: function(scope, elem, attrs) {
            var setModel = function(value) {
                scope.model = value; 
            }            
            $(elem).slider({
                range: false,
	            min: scope.config.min,
	            max: scope.config.max,
                step: scope.config.step,
                slide: function(event, ui) { 
                    scope.$apply(function() {
                        scope.price = ui.value;
                    });
	            }
	        });           
            scope.$watch('price', function(newValue, oldValue) {
                if (newValue !== null && newValue !== undefined){
                    $(elem).slider('value', scope.price);
                }
            }, true);
             
    	}
    }
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<body >
    <div ng-app="myApp">
    <div ng-controller="SomeController">
        <input type="number" ng-model="price" />
        Price: {{price}} 
        <div id="mySlider" slider config="sliderConfig" model="price" class="cdbl-slider"></div>
    </div>
</div>
    </body>

＆＃13;

角度jquery-ui滑块双向绑定不起作用

2 个答案: