Question

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

每个插件在单独的页面中都能正常工作。但是当我在一个页面中使用它们时，angular-flexslider会导致错误：

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 ...

模板文件是：

<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文件是：

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');
  };
};

我该如何解决？告诉我是否需要进一步的信息。感谢。

UPDATE：删除了不必要的html标记，添加了controller.js和app.js内容。

Answer 1

名为slide的指令看起来都在angular-flexslider和ui.bootstrap.carousel中。如果您不需要轮播，请尝试在没有轮播支持的情况下构建AngularUI Bootstrap。

看起来angular使用了boostrap slide而不是flexslider slide，并且引导程序需要flex-slider所需的转换，所以关于哪一个是冲突的获得优先权。

您也可以通过摆弄加载顺序来解决这个问题，但我不确定。

Answer 2

为避免与bootstrap轮播冲突，thenikso / angular-flexslider添加了一个新指令flex-slide和slide。

Bootstrap用户可以使用flex-slide代替slide指令。

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

Answer 3

Jussi Kosunen有权利，但你不需要自己构建AngularUI Bootstrap。只需在HTML中将幻灯片重命名为fslide即可。

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

到

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

当然还有angular-flexslider.js中的指令。

match = attr.slide.match(/^\s*(.+)\s+in\s+(.*?)(?:\s+track\s+by\s+(.+?))?\s*$/);

到

match = attr.fslide.match(/^\s*(.+)\s+in\s+(.*?)(?:\s+track\s+by\s+(.+?))?\s*$/);

并且不要忘记将其中的步骤留在自述文件中供其他贡献者使用。

Answer 4

我收到此错误。.因为我复制了一个预制指令以创建新指令...而忘记更改指令名称。 .directive('addTransaction', function () {

AngularJS错误 - [$ compile：multidir]多指令错误

4 个答案: