0

我知道这可能是一个太笼统的问题，但我想知道如何进行可重用的选择（或任何输入），当我等待它的选项（通过 ajax 请求）时，它会显示“正在充电...”消息选定的选项。

因此，例如，在我的任何观点中，我都可以使用一个名为“ajax-charged”的指令，并且使用该指令的每个选择都会有这种行为。

我在充电时想象的 Html：

<select ng-options="opt in options" ajax-charged>
<option>Charging ... </option>
</select>

收费的html：

<select ng-options="opt in options" ajax-charged>
<option>opt1</option>
<option>opt2</option>
<option>etc</option>
</select>

我想将选项更改为仅包含“充电...”项的数组，但是如何使其可重复使用？欢迎任何其他方法！

4

1 回答 1

0

您的指令需要知道它正在监视哪个数组。您可以将它传递给指令，并让指令监视此数组。

我创建了一个小提琴，展示了这一点：http: //jsfiddle.net/TMVFN/1/

HTML： 

  </select>
  <select ng-model="selectedA" ng-options="optA for optA in optionsA" ajax-charged="optionsA">

  </select>

{{selectedA}}, {{selectedB}}
</div>

JS：

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $timeout) {
    $timeout(function(){
        $scope.optionsA = ['opt1', 'opt2', 'etc'];
        $scope.optionsB = ['opt4', 'opt5'];
    }, 3000);
    $scope.optionsB = ['opt3'];
    $scope.selectedB = 'opt3';
};

myApp.directive('ajaxCharged', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, elm, attrs, ngModel) {            
            $scope.$watch(attrs.ajaxCharged, function(newVal, oldVal) {
                console.log(newVal);
                if (typeof(newVal) === 'undefined' ||
                    typeof(newVal.length) === 'undefined' || 
                    newVal.length === 0) {
                    $scope[attrs.ajaxCharged] = ['Charging...'];
                } else if (newVal !== oldVal && newVal.length > 0) {
                    ngModel.$setViewValue(newVal[0]);
                }
            }, true);
        }
    };
});
于 2013-07-31T23:10:16.740 回答