AngularUi jQuery Passthrough - 调用方法来获取插件值答案

【问题标题】：AngularUi jQuery Passthrough - call method to get plugin valueAngularUi jQuery Passthrough - 调用方法来获取插件值
【发布时间】：2013-05-07 23:47:18
【问题描述】：

我正在使用 AngularJS、AngularUI 的 jQuery passthrough uiJq 和 jQuery 的 noUiSlider 插件，但问题实际上是关于访问方法。 html 部分正确呈现了一个滑块，我需要 2 路绑定到滑块的输出值。我在控制器中尝试了以下 javascript 代码及其变体，但未成功。

似乎 uiJq 不适用于所有 jQuery 插件。我想知道 noUiSlider 是否不起作用，我需要编写一个自定义指令。也不确定我是否需要处理延迟执行或需要uiRefresh 手动处理$watch 的事情。

HTML

<div class="noUiSlider" id="abc" ui-jq="noUiSlider"
    ui-options="{range: [0, 100], start: 50, handles: 1}"></div>

app.controller('MainCtrl', function ($scope) {
    $scope.selectionValue = $('#abc').noUiSlider().val();
    // error, seems to override whatever is in html
    $scope.selectionValue = $('#abc').val();
    // no error but no value is returned
});

谢谢！

【问题讨论】：

标签： javascript jquery angularjs slider angular-ui

【解决方案1】：

好的，所以您会同时遇到很多各种各样的问题，很难弄清楚从哪里开始。首先，请阅读：https://github.com/angular/angular.js/wiki/Understanding-Directives

第二，不要在你的控制器中使用 jQuery。控制器触发一次，它在模板“渲染”之前触发。这意味着您在 DOM 值初始化（甚至存在）之前检索它们，并且您收到错误，因为 .noUiSlider() 从未在 DOM 元素上运行。

当谈到 AngularJS 时，你必须考虑异步。模板不断变化、更新和刷新，您必须牢记这种期望。

总之，长话短说，你最好使用滑动回调函数来更新模型，虽然这有点hackish，如果你不介意弄湿你的鼻子，你可以尝试制作一个新的指令那requires: 'ngModel'

ui-options="{range, [0,100], start: 50, handles: 1, slide: slideCallback }"
...
$scope.slideCallback = function() {
  $scope.myModel = $(this).val();

  // this tells angular to refresh since an async event occurred outside of angular
  $scope.$apply(); 
};

【讨论】：

感谢您所做的一切以及您在与 Angular 相关的所有方面所做的所有工作。你是对的。使用现有组件很容易，但我会以 Angular 方式编写一个合适的滑块指令（如果每个人都可以使用 IE10，那么我可以使用 HTML5 range...）
一个有价值的答案:)。谢谢！

【解决方案2】：

这是一个包装 JQuery UI Slider 的快速脏指令。只需像往常一样设置 ngModel 进行双向绑定，然后在指令标签中添加 min max 方向和动画属性。

示例用法：

<div si-slider ng-model="TargetModel.SomeIntProperty" min="100" max="2000" orientation="horizontal" animate="true"></div>

还有代码：

var directives = angular.module('si.directives', []);    
directives.directive('siSlider', function ($rootScope) {
    var directiveDefinitionObject = {
        restrict: 'EA',
        transclude: 'false',
        template: '<div class="slider"></div>',
        replace: true,
        scope: { Model:"=ngModel"},
        link: function (scope, element, attrs) {
            var change = function () {
                scope.Model = (element).slider("value");
                if (!$rootScope.$$phase) {
                    scope.$apply();
                }
            };
            element.slider({
                value: scope.Model,
                animate: attrs.animate,
                orientation: attrs.orientation,
                min: parseInt(attrs.min, 10),
                max: parseInt(attrs.max, 10),
                slide: change,
                change: change
            });
            scope.$watch('Model', function (value) {
                element.slider("value", value);
            });
        }
    };

    return directiveDefinitionObject;
});

【讨论】：