AngularJS - 指令与 Jquery inside 指令相结合答案

【问题标题】：AngularJS - Directive in combination with Jquery inside directiveAngularJS - 指令与 Jquery inside 指令相结合
【发布时间】：2014-08-01 13:41:24
【问题描述】：

如何在尚未准备好 <select> 的指令中“激活”jQuery(element).scombobox()。

如需了解更多详情，请参阅http://plnkr.co/edit

这是html：

<div tu-combobox="" ng-model="comboboxvalue" options="combobox.options"></div>

我有这个指令：

.directive('tuCombobox', function($compile) {
        return {
            restrict: 'A',
            replace: true,
            require: 'ngModel',
            scope: {
                feature: '=',
                options: '=',
                tudisabled: '='
            },
            template: '<select ng-disabled="tudisabled" ng-options="option.value as option.text for option in options"></select>',
            link: function(scope, element, attributes, ngModel) {


  // this doesn't work because the template isn't yet rendered
            //element.scombobox();


  // but using this i get a bunch of errors $rootScope:inprogress

          scope.$watch('ngModel', function(){
            element.scombobox();
           });


          }
        };
    })

为什么这么难实现？

【问题讨论】：

标签： jquery angularjs jquery-plugins angularjs-directive

【解决方案1】：

由于模板是异步检索的（即使在本地可用，例如在$templateCache 中），您需要在 Angular 完成其“内容”之后执行您的代码。
这里最安全的是在所有挂起的操作都完成后使用$timeout 执行您的代码。

例如：

.directive('tuCombobox', function ($timeout) {
    return {
        ...
        link: function tuComboboxPostLink(scope, elem) {
            $timeout(function () {
                elem.scombobox();
            });
        }
    };
});

Updated plunkr

【讨论】：

您好，谢谢，这解决了 $rootScope: inprogress 的问题。但是我在一个网格中使用了大约 60 个组合框，现在当它们转换为 scombobox() 时会出现视觉延迟

【解决方案2】：

下面我尝试将 jquery datetimepicker 指令调整到您的组合框，但我没有编译它，因此您需要对其进行润色。

.directive('tuCombobox', function($compile) {
        return {
            restrict: 'EA',
            replace: true,
            require: 'ngModel',
            scope: {
                feature: '=',
                options: '=',
                tudisabled: '='
            },
            compile: function(element, attrs) {
                var modelAccessor = $parse(attrs.ngModel);

                var html = '<select ng-disabled="tudisabled" ng-options="option.value       as option.text for option in options"></select>';

                var newElem = $(html);
                element.replaceWith(newElem)

        return function(scope, element, attributes, ngModel) {

           var processSelection = function () {
                var selection = element.combox("getvalue");
                scope.$apply(function (scope) {
                    // Change bound variable
                    modelAccessor.assign(scope, selection;
                });
            };
            //if option is selected on UI
            element.combobox({onSelect:processSelection});

            //If option is set from code
            scope.$watch(modelAccessor, function(val){
                element.combobox("setValue",val);
              })
          }
            }
        };
    });

【讨论】：