1，在我对自定义指令的介绍中，控制器在指令中。在滑块示例中，它在外面。如果我采用这行代码，在示例中的指令之外：

Question

我有一个基础Angular SPA（'app'）。在该应用程序中，我想使用我找到的ng图像滑块。滑块的例子是一个完美的自定义指令。我的理解是，我应该能够在Angular应用程序中实现自定义指令，并且它独立存在。但是，我的理解是，在SPA中，只能有一个Angular应用程序。滑块的示例不仅是自定义指令，还是一个应用程序。我一直在尝试从应用程序中解除指令，以便我可以在我的基础应用程序中应用它，当然没有成功。

以下是基础应用的index.html：

<html ng-app="app">
  <head>
    <base href="/">
  </head>
  <body>
    Hello VSLive 2015

    <div>
      <a ng-href="/">Customer</a>
    </div>

    <ng-view></ng-view>

    <script src="lib/angular.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="app.module.js"></script>
    <script src="routes.js"></script>
    <script src="customer.controller.js"></script>
    <script src="customer-detail.controller.js"></script>
    <script src="customer.service.js"></script>
</body>
</html>

以下是基础应用中的应用声明：

(function () {
  angular
.module('app', ['ngRoute']);
})()

以下是我的问题。

1，在我对自定义指令的介绍中，控制器在指令中。在滑块示例中，它在外面。如果我采用这行代码，在示例中的指令之外：

    sliderApp.controller('SliderController', function($scope) {
$scope.images=[{src:'img1.png',title:'Pic 1'},{src:'img2.jpg',title:'Pic 2'},{src:'img3.jpg',title:'Pic 3'},{src:'img4.png',title:'Pic 4'},   {src:'img5.png',title:'Pic 5'}];   });

并将其移到指令列表中：

  controller: function ($scope) {
  $scope.images = [{ src: 'img1.png', title: 'Pic 1' }, { src: 'img2.jpg', title: 'Pic 2' }, { src: 'img3.jpg', title: 'Pic 3' }, { src: 'img4.png', title: 'Pic 4' }, { src: 'img5.png', title: 'Pic 5' }];

}

有效且正确吗？

2，我从这个（在示例中）

更改了指令的声明

sliderApp.directive('slider', function ($timeout) {
  return {

到这个

angular
  .module('app.directives.slider', ['ngAnimate'])
  .directive('slider', function ($timeout) {
     return {

最后，我添加了对Angular Animate的引用。在示例中，需要像这样：

var sliderApp=angular.module('sliderApp',['ngAnimate']);

我尝试将它放在最初的app声明中：

(function () {
  angular
  .module('app', ['ngRoute','ngAnimate']);
})()

然后在指令中：

    angular
  .module('app.directives.slider', ['ngAnimate'])
  .directive('slider', function ($timeout) {
       return {

应用程序停止为我工作的第一种方式（没有错误）。第二种方式，滑块不起作用。该指令的最终实现如下例所示：

     <body ng-controller="SliderController">
     <h1>Slider Using AngularJS</h1>
     <slider images="images"/>
   </body>

我期待通过按照我的方式移动控制器，我可以这样做：

 <div>
   <h1>Slider Using AngularJS</h1>
   <slider images="images"/>
 </div>

Answer 1

根据我在问题中的实际情况，我认为问题可能是您没有在html中引用滑块模块。

你在html标签中的

：

<html ng-app="app">

但你的模块（唯一的模块）声明如下：

(function () {
  angular
  .module('app', ['ngRoute','ngAnimate']);
})()

没有提及您的app.directive.slider模块。如果您在依赖项中包含该模块，我认为您将更接近目标。

(function () {
  angular
  .module('app', ['ngRoute','app.directive.slider']);
})()

鉴于app.directive.slider已包含ngAnimate依赖关系，您不需要在主应用中声明（如果您在应用中也使用它，则必须这样做。）

如果您要发布新代码，我会更新我的答案

Answer 2

我的问题与版本不合适的angular-animate.js

有关

在SPA中获取自定义指令时遇到问题

1，在我对自定义指令的介绍中，控制器在指令中。在滑块示例中，它在外面。如果我采用这行代码，在示例中的指令之外：

2，我从这个（在示例中）

2 个答案: