Question

我希望在将集合分配给源变量后启动第三方控件（bootstrap-select）。为此，我使用指令并观看这样的集合。

angular
.module('app').directive('bootstrapDropdown', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            scope: {
                collectionName: '='
            },
            require: '?ngModel',
            link: function (scope, el, attrs) {
                el.selectpicker();
                scope.$watchCollection(scope.collectionName, function (newVal) {
                    $timeout(
                        function () {
                            el.selectpicker('refresh');
                        }
                    );
                });
            }
        };
    }
]);

如果我在$watchCollection中将集合名称作为字符串传递，它可以正常工作。但我正在寻找一个通用指令，所以我传递像

这样的集合名称

   <select bootstrap-dropdown collection-name="commandGroups"  ng-model="vm.Job.CommandGroup" name="ddlCommandGroup">
                        <option value="">Select Something</option>
                        <option ng-repeat="cmdGroup in commandGroups" collection-name="commandGroups" value="{{cmdGroup.Id}}">{{cmdGroup.Name}}</option>
                    </select>

但它不能正常工作

Answer 1

Collection-name是select-element上的一个属性，不能只使用scope.collectionName来监视，因为它将返回undefined。您可以使用link-function中的以下行从'collection-name'属性中获取值：

scope.collectionName = attrs.collectionName;

由于我没有数据，因此不确定它是否适合您，但它可能对您有所帮助。

无法将参数传递给angular指令

1 个答案: