Databases
StackOverflow2013
Postsdbo
POAngularJS error - [$compile:multidir] Multiple directives error
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS error - [$compile:multidir] Multiple directives error
    text
    copied!<p>I use these packages: An angularjs modal from angular-ui package: <a href="http://angular-ui.github.io/bootstrap/#/modal">http://angular-ui.github.io/bootstrap/#/modal</a> And Angular-flexslider from here: <a href="https://github.com/EnthusiasticCode/angular-flexslider">https://github.com/EnthusiasticCode/angular-flexslider</a></p> <p>Every plugin works good when they are in separate pages. but when i use them in one page, angular-flexslider causes an error:</p> <pre><code>Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: &lt;div class="flexslider-container ng-isolate-scope ng-scope" slide="s in slides" animation="slide"&gt; http://errors.angularjs.org/1.2.0-rc.2/$compile/multidir?p0=flexSlider&amp;p1=s…20ng-scope%22%20slide%3D%22s%20in%20slides%22%20animation%3D%22slide%22%3E at ... </code></pre> <p>The template file is this:</p> <pre><code>&lt;flex-slider slide="s in slides" animation="slide"&gt; &lt;li&gt; &lt;img ng-src="{{s}}"&gt; &lt;/li&gt; &lt;/flex-slider&gt; &lt;div ng-controller="ModalDemoCtrl"&gt; &lt;script type="text/ng-template" id="myModalContent.html"&gt; &lt;h3&gt;I'm a modal!&lt;/h3&gt; &lt;/script&gt; &lt;button class="btn" ng-click="open()"&gt;Open me!&lt;/button&gt; &lt;/div&gt; </code></pre> <p>And app.js file:</p> <pre><code>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 ...) }); }]); </code></pre> <p>The controller.js file is:</p> <pre><code>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'); }; }; </code></pre> <p>How can i fix it? Tell me if further information is needed. Thanks.</p> <p><strong>UPDATE:</strong> unnecessary html markups removed, controller.js and app.js contents added.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload