AngularJS 错误 - [$compile:multidir] 多指令错误 [英] AngularJS error - [$compile:multidir] Multiple directives error

问题描述

我使用这些包:来自 angular-ui 包的 angularjs 模态:http://angular-ui.github.io/bootstrap/#/modal和来自这里的 Angular-flexslider:https://github.com/EnthusiasticCode/angular-flexslider

每个插件都在单独的页面中时效果很好.但是当我在一页中使用它们时，angular-flexslider 会导致错误:

错误:[$compile:multidir] 多个指令 [flexSlider, slide] 要求嵌入:<div class="flexslider-container ng-isolate-scope ng-scope" slide="s in slides动画=幻灯片">http://errors.angularjs.org/1.2.0-rc.2/$compile/multidir?p0=flexSlider&p1=s…20ng-scope%22%20slide%3D%22s%20in%20slides%22%20animation%3D%22幻灯片%22%3E在 ...

模板文件是这样的:

<li><img ng-src="{{s}}"></flex-slider><div ng-controller="ModalDemoCtrl"><script type="text/ng-template" id="myModalContent.html"><h3>我是一个模态！</h3><button class="btn" ng-click="open()">打开我！</button>

和 app.js 文件:

angular.module('theApp', ['theApp.filters', 'theApp.services', 'theApp.directives', 'theApp.controllers', 'ngRoute', 'ngSanitize', 'angular-flexslider', 'ui.bootstrap']).配置(['$routeProvider'，函数($routeProvider){$routeProvider.when('/home', {templateUrl: (someurl...) , controller: (a name ...) });}]);

controller.js 文件是:

angular.module('theApp.controllers', []).controller('SliderMedium', [ '$scope', function($scope) {$scope.slides = ['图像/滑块/01.png','图像/滑块/02.png',];}]);//========= 这是来自 angular-ui 的控制器，没有修改 ========://==========================================================================var ModalDemoCtrl = 函数($scope，$modal){$scope.items = ['item1', 'item2', 'item3'];$scope.open = 函数 () {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器:ModalInstanceCtrl，解决: {项目:函数(){返回 $scope.items;}}});};};var ModalInstanceCtrl = function ($scope, $modalInstance, items) {$scope.items = 物品；$scope.selected = {项目:$scope.items[0]};$scope.ok = 函数 () {$modalInstance.close($scope.selected.item);};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');};};

我该如何解决?告诉我是否需要更多信息.谢谢.

更新: 删除了不必要的 html 标记，添加了 controller.js 和 app.js 内容.

解决方案

一个名为 slide 的指令看起来同时在 angular-flexslider 和 ui.bootstrap 中.carousel.如果您不需要轮播，请尝试构建不支持轮播的 AngularUI Bootstrap.

看起来 angular 使用的是 boostrap slide 而不是 flexslider slide 并且引导程序需要嵌入，这也是 flex-slider，因此在哪个优先级方面存在冲突.

您也可以通过调整加载顺序来解决此问题，但我不确定这一点.

I use these packages: An angularjs modal from angular-ui package: http://angular-ui.github.io/bootstrap/#/modal And Angular-flexslider from here: https://github.com/EnthusiasticCode/angular-flexslider

Every plugin works good when they are in separate pages. but when i use them in one page, angular-flexslider causes an error:

Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: <div class="flexslider-container ng-isolate-scope ng-scope" slide="s in slides" animation="slide">
http://errors.angularjs.org/1.2.0-rc.2/$compile/multidir?p0=flexSlider&p1=s…20ng-scope%22%20slide%3D%22s%20in%20slides%22%20animation%3D%22slide%22%3E
    at ...

The template file is this:

<flex-slider slide="s in slides" animation="slide">
    <li>
        <img ng-src="{{s}}">
    </li>
</flex-slider>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <h3>I'm a modal!</h3>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
</div>

And app.js file:

angular.module('theApp', ['theApp.filters', 'theApp.services', 'theApp.directives', 'theApp.controllers', 'ngRoute', 'ngSanitize', 'angular-flexslider', 'ui.bootstrap']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/home', {templateUrl: (someurl...) , controller: (a name ...) });
  }]);

The controller.js file is:

angular.module('theApp.controllers', [])
 .controller('SliderMedium', [ '$scope', function($scope) {
   $scope.slides = [
     'images/slider/01.png',
     'images/slider/02.png',
   ];
 }]);

// ========= THIS IS controllers from angular-ui with no modification =======:
// ==========================================================================
var ModalDemoCtrl = function ($scope, $modal) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

How can i fix it? Tell me if further information is needed. Thanks.

UPDATE: unnecessary html markups removed, controller.js and app.js contents added.

解决方案

A directive named slide looks to be both in angular-flexslider and ui.bootstrap.carousel. If you don't need carousel, try making a build of AngularUI Bootstrap without carousel support.

It looks like angular is using the boostrap slide instead of the flexslider slide and the bootstrap one requires transclusion which is also required by flex-slider, so there's a conflict as to which one gets precedence.

You may also be able to fix this by fiddling with the load order, but I'm not certain of that.

这篇关于AngularJS 错误 - [$compile:multidir] 多指令错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！