javascript - 无法将参数传递给 Angular Directive(指令)

Question

我想在将集合分配给源变量后启动第三方控件(引导选择)。为此，我正在使用指令并观看这样的集合。

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。您可以通过在链接函数中使用以下行从“collection-name”属性获取值:

scope.collectionName = attrs.collectionName;

不确定它是否适合您，因为我没有数据，但它可能会进一步帮助您。