我已经定制了一些角度材质组件,但我必须在源代码中执行此操作。我想将更改与原始angular-material文件分开,但是新组件会覆盖现有组件。我已经阅读了priority: 1
和terminal: true
来扩展指令,但是当我尝试这样做时,我收到一个错误,我找不到元素上的控制器。我只是将我在角度材料中编辑的代码复制/粘贴到我的指令文件中,并用priority: 1
和terminal: 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中),相同的减去终端和优先级属性找到控制器?任何建议都非常欢迎。