多个指令> [flexSlider，slide]要求包含

Question

我正在使用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 =在REGEX_STRING_REGEXP（ http：// localhost：9000 / bower_components / angular / angular）中 ，transclusion＆p3 =％3Cdivlass％3D％flexslider-container％22％20slide％3D％s％in％slides％22％20animation％3D％slide％22％3E .js：63：12 ）位于applyDirectivesToNode（ http：// localhost：9000 / bower_components / angular / angular.js：7397 ）的assertNoDuplicate（ http：// localhost：9000 / bower_components / angular / angular.js：8035：15 ） ：13 ）在compileNodes（ http：// localhost ：9000 / bower_components / angular / angular.js：7051：15 ）在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 ）在compile（ http： //localhost:9000/bower_components/angular/angular.js:6946:15 ） 在调用LinkFn（ http：// localhost：9000 / bower_components / angular / angular ）编译（ http：// localhost：9000 / bower_components / angular-ui-router / release / angular-ui-router.js：4013：20 ）时。 js：8258：9）（匿名函数）@ angular.js：11655 $获取@ 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

Answer 1

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

如果您在第12行上查看angular-flexslider的代码（从此处开始 ），它将检查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>