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並嘗試使用他們的解決方案(刪除替換:真),但沒有幫助,我也不想讓它被替換:無論如何。