javascript - 多个指令 > [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 Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: 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 at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:63:12) at assertNoDuplicate (http://localhost:9000/bower_components/angular/angular.js:8035:15) at applyDirectivesToNode (http://localhost:9000/bower_components/angular/angular.js:7397:13) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7039:15) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) at compileNodes (http://localhost:9000/bower_components/angular/angular.js:7051:15) at compile (http://localhost:9000/bower_components/angular/angular.js:6946:15) at compile (http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4013:20) at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)(anonymous function) @ angular.js:11655$get @ angular.js:8596invokeLinkFn @ angular.js:8260nodeLinkFn @ angular.js:7768compositeLinkFn @ angular.js:7117publicLinkFn @ angular.js:6996updateView @ angular-ui-router.js:3959(anonymous function) @ 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(anonymous function) @ 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 的轮播 小部件与 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>