多个指令 > [flexSlider, slide] 要求嵌入答案

【问题标题】：Multiple directives > [flexSlider, slide] asking for transclusion多个指令 > [flexSlider, slide] 要求嵌入
【发布时间】：2015-08-01 20:05:47
【问题描述】：

我正在使用angular-flexslider

我的 bower.json：

{
  "name": "...",
  "version": "1.0.0",
  "dependencies": {
    "angular": ">=1.2.*",
    "json3": "~3.3.1",
    "es5-shim": "~3.0.1",
    "jquery": "~1.11.0",
    "bootstrap": "~3.1.1",
    "angular-resource": ">=1.2.*",
    "angular-cookies": ">=1.2.*",
    "angular-sanitize": ">=1.2.*",
    "angular-bootstrap": "~0.11.0",
    "font-awesome": ">=4.1.0",
    "lodash": "~2.4.1",
    "angular-ui-router": "~0.2.10",
    "angular-google-maps": "~2.1.0",
    "angular-animate": "~1.3.15",
    "ng-table": "~0.5.4",
    "angular-touch": "~1.3.15",
    "angular-flexslider": "~1.3.2"
  },
  "devDependencies": {
    "angular-mocks": ">=1.2.*",
    "angular-scenario": ">=1.2.*"
  },
  "resolutions": {
    "angular": "1.3.15"
  }
}

在我的 index.html 中，我包含了 FlexSlider 的 CSS：

<link rel="stylesheet" type="text/css" href="/components/flexslider/flexslider.css">

然后包含脚本（顺序相关）：

<script src="/components/jquery/jquery.js"></script>
<script src="/components/flexslider/jquery.flexslider.js"></script>
<script src="/components/angular/angular.js"></script>
<script src="/components/angular-flexslider/angular-flexslider.js"></script>

在我的 AngularJS 应用程序中，io 导入 angular-flexslider 模块：

'use strict';

angular.module('autoPrivilegeApp', [
  'ngCookies',
  'ngResource',
  'ngAnimate',
  'ngTable',
  'ngTouch',
  'ngSanitize',
  'ui.router',
  'ui.bootstrap',
  'uiGmapgoogle-maps','angular-flexslider'])
  .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider
      .otherwise('/');
    window.angular
    $locationProvider.html5Mode(true);
  });

我的 MainCtrl 中有一个幻灯片：

$scope.slides = [      'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
  'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
  'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
  'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];

在我的 main.html 中：

<header class="hero-unit" id="banner">
  <div class="container">
    <div ng-controller="MainCtrl">
      <flex-slider slide="s in slides" animation="slide">
        <li>
          <img ng-src="{{s}}">
        </li>
      </flex-slider>
    </div>
  </div>
</header>

但是当我执行这个时，我有这个错误：

angular.js:11655 错误：[$compile:multidir] 多个指令 [flexSlider, slide] 要求嵌入： http://errors.angularjs.org/1.3.15/$compile/multidir?p0=flexSlider&p1=slide&p2=transclusion&p3=%3Cdivlass%3D%flexslider-container%22%20slide%3D%s%in%slides%22%20animation%3D%slide%22%3E 在 REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12) 在 assertNoDuplicate (http://localhost:9000/bower_components/angular/angular.js:8035:15) 在 applyDirectivesToNode (http://localhost:9000/bower_components/angular/angular.js:7397:13) 在 compileNodes (http://localhost:9000/bower_components/angular/angular.js:7039:15) 在 compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) 在 compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) 在 compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) 编译时 (http://localhost:9000/bower_components/angular/angular.js:6946:15) 编译时 (http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4013:20) 在 invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)(anonymous 函数）@angular.js:11655$get@angular.js:8596invokeLinkFn@ angular.js:8260nodeLinkFn @ angular.js:7768compositeLinkFn @ angular.js:7117publicLinkFn @ angular.js:6996updateView @ angular-ui-router.js:3959（匿名函数）@ angular-ui-router.js:3921$get.Scope.$broadcast @ angular.js:14785$state.transitionTo.$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3311processQueue @ angular.js:13248(匿名函数）@angular.js:13264$get.Scope.$eval@ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829

【问题讨论】：

他们的 README 中有一个警告：警告 UI Bootstrap 用户：您必须使用 flex-slide 以避免与轮播的名称冲突。
@yoavmatchulsky GG，但知道我有这个错误Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
尝试flex-slide 而不是slide 属性。它与引导程序的 UI 轮播冲突。您可以查看here中的代码
@yoavmatchulsky thx 伙计，一切都很好；）发布你的答案，我验证它。

标签： javascript angularjs

【解决方案1】：

UI Bootstrap's carousel 小部件与 flex-slider 冲突。

如果您查看angular-flexslider 的代码（来自here），在第12 行，它会检查slide 或flexSlide 属性。

将您的slide 属性更改为flex-slide，它应该可以工作。

编辑（添加代码）：

<header class="hero-unit" id="banner">
  <div class="container">
    <div ng-controller="MainCtrl">
      <flex-slider flex-slide="s in slides" animation="slide">
        <li>
          <img ng-src="{{s}}">
        </li>
      </flex-slider>
    </div>
  </div>
</header>

【讨论】：