angularjs - 将 promise 传递给 Angular JS 中的延迟加载选择

Question

我在下面找到了 jsfiddle，我想让选项从传递到我已经在范围内的选择标记属性的 promise 中加载...在将数据传递到其中时我有点菜鸟指令属性...我只想让 select 显示加载，然后在加载 promise 之后，然后显示数据...

此处示例(假设 myData 是 $scope 中的数组)

 <select ng-model="select.value" ng-options="o.Description for o in select.options" lazy-load-options="" data-options="select.options" option-source="myData">
    <option value=""> - Select - </option>
</select>

http://jsfiddle.net/TigerC10/g862L/

   link: function($scope, $element, $attrs, $ngModel){
        // Ajax loading notification
        $scope.options = [
            {
                Description: "Loading..."
            }
        ];

        // Control var to prevent infinite loop
        $scope.loaded = false;

        $element.bind('mousedown', function() {

            // Use setTimeout to simulate web service call
            setTimeout(function(){
                if(!$scope.loaded) {
                    $scope.$apply(function(){
                        $scope.options = [
                            {
                                Description: "Option 1"
                            },
                            {
                                Description: "Option 2"
                            },
                            {
                                Description: "Option 3"
                            }
                        ];
                    });

Answer 1

作为那个 fiddle 的原作者，我发现自己在寻找东西时偶然发现了这个问题，这很有趣。但是，您在回答自己的问题时错误地使用了 setTimeout 。 2 秒的人工 setTimeout 只是对服务器调用的模拟 - 但在回答您自己的问题时，您在换掉 promise 后将其留在了指令中。您应该删除它，并为模拟点击设置 1 毫秒超时。

这是您想要执行的示例:

http://jsfiddle.net/TigerC10/xkaqm8rw/

HTML

    <select ng-model="select.value" ng-options="o.Description for o in select.options" lazy-load-options="" lazy-load-from="simulatePromise()" data-options="select.options">
        <option value=""> - Select - </option>
    </select>

JS

.directive('lazyLoadOptions', [function() {
    return {
        restrict: 'EA',
        require: 'ngModel',
        scope: {
            options: '=',
            lazyLoadFrom: '&'
        },
        link: function($scope, $element, $attrs, $ngModel){
            // Ajax loading notification
            $scope.options = [
                {
                    Description: "Loading..."
                }
            ];

            // Control var to prevent infinite loop
            $scope.loaded = false;

            $element.bind('mousedown', function() {

                // Load the data from the promise if not already loaded
                if(!$scope.loaded) {
                    $scope.lazyLoadFrom().then(function(data) {
                        $scope.options = data;

                        // Prevent the load from occurring again
                        $scope.loaded = true;

                        // Blur the element to collapse it
                        $element[0].blur();

                        // Click the element to re-open it (use timeout to escape digest cycle)
                        setTimeout(function(){
                            var e = document.createEvent("MouseEvents");
                        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                            $element[0].dispatchEvent(e);
                        }, 1);
                    }, function(reason){
                        // Error handling here
                        console.error(reason);
                    });
                }
            });
        }
    }
}])

基本上，您要添加另一个采用 promise 函数的指令范围参数，然后在指令中执行 promise 函数。唯一的问题是您必须在摘要循环之外执行模拟点击，否则它不会接受对选择选项的更改。因此，我将这些模拟点击包含在 1 毫秒的超时中。