2014-09-11 40 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匹配”,现在它的工作。

相关问题