отдельные угловые директивы

Question

Я изучаю угловые директивы. Я создал 2 простых из них следующие этого примера взяты из

http://blog.revolunet.com/blog/2013/11/28/create-resusable-angularjs-input-component/

angular.module('demo', []) 

.controller('DemoController', function($scope) { 
    $scope.rating = 42;  
}) 

.directive('rnStepper', function() { 
    return { 
     restrict: 'AE', 
     scope: { 
      value: '=ngModel' 
     }, 
     template: '<button ng-click="decrement()">-</button>' + 
        '<div>{{ value }}</div>' + 
        '<button ng-click="increment()">+</button>', 
     link: function(scope, iElement, iAttrs) { 
      scope.increment = function() { 
       scope.value++; 
      } 
      scope.decrement = function() { 
       scope.value--; 
      } 
     } 
    }; 
}); 

Это содержится в моем файле app.js: ../app/scripts/app.js

Теперь я хотели бы переместить код директиву в отдельном файле в следующей папке:

../app/custom_directive/my_demo_directive.js

.directive('rnStepper', function() { 
     return { 
      restrict: 'AE', 
      scope: { 
       value: '=ngModel' 
      }, 
      template: '<button ng-click="decrement()">-</button>' + 
         '<div>{{ value }}</div>' + 
         '<button ng-click="increment()">+</button>', 
      link: function(scope, iElement, iAttrs) { 
       scope.increment = function() { 
        scope.value++; 
       } 
       scope.decrement = function() { 
        scope.value--; 
       } 
      } 
     }; 
    }); 

Как экспортировать директиву из нового местоположения и как я изменил объявление директивы в файле app.js?

Спасибо за вашу помощь

Answer 1

Вы просто удалить объявление директиву из app.js, и поместить его в другой файл таким образом:

angular.module('demo').directive('rnStepper', function() { 
    // same as before 
}); 

Обратите внимание, что angular.module() вызывается с одним аргументом, который означает, что вы хотите получить ссылку на ранее определенный модуль с именем «demo» (тогда как при вызове с массивом в качестве второго аргумента angular.module() определяет новый модуль).

Также обратите внимание, что поскольку модуль должен быть определен ранее, app.js должен находиться перед директивой js-файла в списке <script> элементов в файле HTML.

Answer 2

Все, что вам нужно сделать, это скопировать объявление модуля в новый файл вместе с движущимися директиву (убедитесь, что вы оставляете заявление модуля в контроллере до сих пор). Поэтому в одном файле у вас будет angular.module('demo', []).controller(...), а в другом - angular.module('demo').directive(...). Поскольку он все еще находится в том же модуле, вам не нужно будет изменять app.js, но вам нужно будет потянуть новый файл в свой index.html.

Если вы также хотите, чтобы директива была в другом модуле, вам необходимо добавить новый модуль в файл app.js.

Answer 3

Переместите код директивы в отдельный файл, как в следующем примере, добавьте его в свой html-документ в качестве сценария, и вы хорошо пойдете.

angular.module('demo') 
.directive('directiveName', function() { 
    ... 
});