无法将参数传递给 angular 指令

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 元素上的一个属性，不能仅使用 scope.collectionName 来观察，因为那将 return 未定义。您可以在 link 函数中使用以下行从 'collection-name' 属性获取值：

scope.collectionName = attrs.collectionName;

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

无法将参数传递给 angular 指令

unable to pass parameter to angular directive

javascript

angularjs

angularjs-directive

bootstrap-select