1
我想用我自己的自定义指令之一的内AngularJS UI引导事先键入的内容指令,但无论我做什么,我不断收到同样的错误:错误试图AngularJS引导事先键入的内容添加到自定义指令
Error: [$compile:multidir] Multiple directives [match, typeaheadMatch] asking for new/isolated scope on: <div typeahead-match="" index="$index" match="match" query="query" template-url="templateUrl">
对于在指令中使用范围的方式(无论我们应该使用隔离范围还是继承范围),我仍然不能100%满意,所以我不确定这里要做什么。这就是我的指令现在的样子。
app.directive('skMagicInput', function ($timeout) {
return {
restrict: 'A',
replace: true,
require: 'ngModel',
template: '<div class="sk-magic-input">\
<input type="text" ng-model="thisModel" ng-show="isEditable" ng-blur="toggleEdit(true)" typeahead="item for item in items" />\
<span class="sk-magic-value" ng-show="!isEditable && !isConnecting" ng-click="toggleEdit()">{{ thisModel }}</span>\
<img src="images/interstitial/connect-animate.gif" class="iConnect" ng-show="isConnecting" />\
</div>',
link: function (scope, elem, attr) {
scope.isEditable = false;
var failed = false;
scope.toggleEdit = function (shouldUpdate) {
scope.isEditable = !scope.isEditable;
if (scope.isEditable) {
elem.find('input').css('width', elem.find('.sk-magic-value').width());
}
if (shouldUpdate) {
// Run API
scope.isComplete = false;
scope.isConnecting = true;
$timeout(function() {
scope.isConnecting = false;
scope.isComplete = true;
if (failed) {
scope.isValid = false;
} else {
scope.isValid = true;
}
}, 2000);
}
}
scope.$watch(attr.skTypeahead, function (val) {
scope.items = val;
});
scope.$watch(attr.ngModel, function (val) {
scope.thisModel = val;
});
}
}
});
而这就是我的指令看起来像在HTML模板
<input sk-magic-input ng-model="mailbox.SourceAccount.AccountDisplayName" sk-typeahead="model.AllSourceMailboxes" />
我想实际<input>
值绑定到ngModel变量,和我想要的预输入源列表是在skTypeahead属性中给出的列表。执行此操作的正确方法是什么,不会导致此错误?
我发现another SO question并尝试使用他们的解决方案(删除替换:真),但没有帮助,我也不想让它被替换:无论如何。