Question

我的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/ $编译/ multidir P0 = flexSlider＆安培; P1 =滑动＆安培; P2 = transclusion＆安培; P3 =％3Cdivlass％3D％flexslider容器％22％20slide％3D中％幻灯片％S％％22％20animation％3D ％滑动％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） at 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） at 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

Answer 1

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

如果您在第12行查看angular-flexslider的代码（来自here），则会检查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>

多个指令＆gt; [flexSlider，slide]要求进行翻译

1 个答案: