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

回答

2

啊,我意識到這個問題... Angular UI Bootstrap Typeahead使用「match」指令,並且我有我自己的「match」指令已經在我的應用程序中聲明,所以它有衝突試圖訪問一個我而不是他們創建的那個。我所做的只是改變我的「匹配」指令被稱爲「sk匹配」,現在它的工作。

相關問題