覆盖Angular材料中的指令 - 编译

时间:2015-12-14 20:16:22

标签: javascript angularjs angularjs-directive angular-material

我已经定制了一些角度材质组件,但我必须在源代码中执行此操作。我想将更改与原始angular-material文件分开,但是新组件会覆盖现有组件。我已经阅读了priority: 1terminal: true来扩展指令,但是当我尝试这样做时,我收到一个错误,我找不到元素上的控制器。我只是将我在角度材料中编辑的代码复制/粘贴到我的指令文件中,并用priority: 1terminal: true覆盖所有指令,但在.configureAutocomplete方法中获取未定义的控制器。

这是编译功能:

function compile(element, attr) {
        // Grab the user template from attr and reset the attribute to null.
        var userTemplate = attr['$mdUserTemplate'];
        attr['$mdUserTemplate'] = null;

        // Set the chip remove, chip contents and chip input templates. The link function will put
        // them on the scope for transclusion later.
        var chipRemoveTemplate   = getTemplateByQuery('md-chips>*[md-chip-remove]') || CHIP_REMOVE_TEMPLATE,
            chipContentsTemplate = getTemplateByQuery('md-chips>md-chip-template') || CHIP_DEFAULT_TEMPLATE,
            chipInputTemplate    = getTemplateByQuery('md-chips>md-autocomplete')
                || getTemplateByQuery('md-chips>input')
                || CHIP_INPUT_TEMPLATE,
            staticChips = userTemplate.find('md-chip');

        // Warn of malformed template. See #2545
        if (userTemplate[0].querySelector('md-chip-template>*[md-chip-remove]')) {
            $log.warn('invalid placement of md-chip-remove within md-chip-template.');
        }

        function getTemplateByQuery (query) {
            if (!attr.ngModel) return;
            var element = userTemplate[0].querySelector(query);
            return element && element.outerHTML;
        }

        /**
         * Configures controller and transcludes.
         */
        return function postLink(scope, element, attrs, controllers) {

            $mdUtil.initOptionalProperties(scope, attr);

            $mdTheming(element);
            var mdChipsCtrl = controllers[0];
            mdChipsCtrl.chipContentsTemplate = chipContentsTemplate;
            mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;
            mdChipsCtrl.chipInputTemplate    = chipInputTemplate;

            element
                .attr({ ariaHidden: true, tabindex: -1 })
                .on('focus', function () { mdChipsCtrl.onFocus(); });

            if (attr.ngModel) {
                mdChipsCtrl.configureNgModel(element.controller('ngModel'));

                // If an `md-on-append` attribute was set, tell the controller to use the expression
                // when appending chips.
                if (attrs.mdOnAppend) mdChipsCtrl.useMdOnAppendExpression();

                // The md-autocomplete and input elements won't be compiled until after this directive
                // is complete (due to their nested nature). Wait a tick before looking for them to
                // configure the controller.
                if (chipInputTemplate != CHIP_INPUT_TEMPLATE) {
                    $timeout(function() {
                        $timeout(function() {
                            if (chipInputTemplate.indexOf('<md-autocomplete') === 0) {
                                // *** WHERE PROBLEM IS ***
                                console.log("element: ", element.find('md-autocomplete')); // found element
                                console.log("controller: ", element.find('md-autocomplete').controller('mdAutocomplete')); //undefined
                                mdChipsCtrl
                                    .configureAutocomplete(element.find('md-autocomplete')
                                        .controller('mdAutocomplete'));
                            }
                            mdChipsCtrl.configureUserInput(element.find('input'));
                        });
                    });
                }
            }

            // Compile with the parent's scope and prepend any static chips to the wrapper.
            if (staticChips.length > 0) {
                var compiledStaticChips = $compile(staticChips)(scope.$parent);
                $timeout(function() { element.find('md-chips-wrap').prepend(compiledStaticChips); });
            }
        };
    }
}

为什么这个找不到控制器的任何想法,但原始的(在angular-material.js中),相同的减去终端和优先级属性找到控制器?任何建议都非常欢迎。

0 个答案:

没有答案