AngularJS错误 - [$编译：multidir]多个指令错误

问题描述

我使用这些包：
从角ui包的angularjs模式：http://angular-ui.github.io/bootstrap/#/modal
从这里角flexslider：<一href=\"https://github.com/Enthusiastic$c$c/angular-flexslider\">https://github.com/Enthusiastic$c$c/angular-flexslider

当他们在不同的页面每一个插件工作良好。但是当我在一个页面中使用它们，角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>

和app.js文件：

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 ...) });
  }]);

该controller.js文件是：

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.

更新： HTML不必要的加价去掉，controller.js和app.js内容加入

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

推荐答案

名为幻灯片 A指令看起来是既角flexslider 和 ui.bootstrap.carousel 。如果你不需要旋转木马，请尝试AngularUI引导的生成无转盘的支持。

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.

看起来棱角分明使用的是自举幻灯片而不是flexslider 幻灯片和引导1需要transclusion其中也是由柔性滑块要求，所以有冲突，因为哪一个获得precedence。

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错误 - [$编译：multidir]多个指令错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！