Where to add an Angular.JS Directive? #1091

10 Answer(s)

• 

  0

  hikalkan created 8 years ago

  Support Team

  This is mostly angular related. if you use our template, you can add directives by creating a directives folder here: <a class="postlink" href="https://github.com/aspnetboilerplate/aspnetboilerplate-templates/tree/master/src/AbpCompanyName.AbpProjectName.WebSpaAngular/App/Main">https://github.com/aspnetboilerplate/as ... r/App/Main</a> Then add every directive in a separated .js file. But this is not a rule, it's your choice.

  Save Cancel
• 

  0

  mattdunndc created 8 years ago

  Thanks! I almost have it working. I'm referring to the angular directive in my app file.

  I'm still not sure how to refer to a 2nd controller??

  (function () { var controllerId = 'app.views.users'; angular.module('app').controller(controllerId, [ //'$scope', function ($scope) { // var vm = this; // //About logic... //} '$scope', 'abp.services.app.person', function ($scope, personService) { var vm = this;

          vm.persons = [];
          $scope.currentPage = 1;
          $scope.pageSize = 5;
  
          personService.getPeople({}).success(function (result) {
              vm.persons = result.items;
          });
  
          $scope.pageChangeHandler = function (num) {
              console.log('page changed to ' + num);
          };
      }
              
  
  ]);
  

  })();

  Save Cancel
• 

  0

  mattdunndc created 8 years ago

  Got it working without needing the second js controller. I just referred to the html template. Happy to share a working Angular paging solution for ABP.

  Save Cancel
• 

  0

  andmattia created 8 years ago

  I try to create a new directive but I get this error on the production enviroment.

  I create a file in App/common/driective/draggable.js

  js?v=RTs-jMDzy1oFTjfGGE0IY6oLP7brKVmncyDjZJ5wE9k1:1454 Error: [$injector:unpr] <a class="postlink" href="http://errors.angularjs.org/1.5.0/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20draggableDirective">http://errors.angularjs.org/1.5.0/$inje ... eDirective</a>

  Any idea to solve it?

  Save Cancel
• 

  0

  prahlad created 8 years ago

  Hi,

  I am new to Angular JS, I am trying to use pagination lot of hassle. I saw response from By MattDunnDC who said it is working with one controller, if you don't mind can you please share the code so that I can try on my end too.

  I am using the same <a class="postlink" href="https://github.com/michaelbromley/angul">https://github.com/michaelbromley/angul</a> ... pagination

  getting this error in browser console.

  dirPagination.js:271 Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.

  I did add dirPagination.js in shared layout and added directive in app.js like this

  var app = angular.module('app', [ 'ngAnimate', 'ngSanitize',

      //'ngRoute',
      'angularUtils.directives.dirPagination',
  
      'ui.router',
      'ui.bootstrap',
      'ui.jq',
  
      'abp'
  ]);
  

  Not sure why it is unable to link it.

  Save Cancel
• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi,

  Do you get an error ? If so, can you share it ?

  Save Cancel
• 

  0

  prahlad created 8 years ago

  Yes, here is the error.

  Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.

  Here is my code in cshtml. With this I will see first 10 rows of mylist which has around 400 rows, but didin't get any page numbers so that I can navigate, in Chrome console I am getting the above error.

  <div dir-paginate="jobloc in vm.pagedJobLocationList | filter:search| itemsPerPage: 10" total-items="totalUsers" current-page="pagination.current" pagination-id="newPageNumber"> <span>{{jobloc.jobLocationID}}</span> <span>    </span> <span class="task-assignedto">{{jobloc.jobLocationName}}</span> <span>    </span> <span class="task-assignedto">{{jobloc.city}}</span>
  <span>    </span> <span class="task-assignedto">{{jobloc.state}}</span> <span>    </span> <span class="task-assignedto">{{jobloc.zip}}</span> @<button ng-click="vm.editJobLocation(jobloc)" title="@L("Edit")" class="btn btn-sm btn-info"> <i class="icon-pencil"></i> </button>@ </div>

  <div class="text-center"> <dir-pagination-controls boundary-links="true" direction-links="true" on-page-change="pageChanged(newPageNumber)" template-url="/App/utils/dirPagination.tpl.html"></dir-pagination-controls> </div>

  Save Cancel
• 

  0

  prahlad created 8 years ago

  Adding a directive for pagination is not helping me and frustrating.

  For simple pagination I am having this issue which makes me to think this boiler plate framework is going to keep me in trouble future. Almost deciding to drop from this framework.

  Save Cancel
• 

  0

  prahlad created 8 years ago

  Matt - Please share your answer for pagination with ABP,

  I am seeing only first 10 rows bottom no links for pagination are showing in the browser, in view source I can see the div but they are not appearing. Not sure what to go further with pagination.

  Save Cancel
• 

  0

  ismcagdas created 8 years ago

  Support Team

  Hi prahlad,

  As Halil stated before, there is nothing related to ABP about this angularjs directive. Does this work for you on a non ABP project ?

  I have tried to use this plugin after your question and it worked for me. Let me explain my steps,

  1. I created a folder named pagination under directives folder and added latest dirPagination.js and dirPagination.tpl.html under it. dirPagination.js is automatically bundled and added to layout in my project. You can add it to your layout if you don't have that mechanism.

  2. Then in app.js I added 'angularUtils.directives.dirPagination' moudle dependency. My app definition became like this.

  angular.module("app", [
      "ui.router",
      "ui.bootstrap",
      'ui.utils',
      "ui.jq",
      'ui.grid',
      'ui.grid.pagination',
      "oc.lazyLoad",
      "ngSanitize",
      'angularFileUpload',
      'daterangepicker',
      'angularMoment',
      'frapontillo.bootstrap-switch',
      'abp',
      'angularUtils.directives.dirPagination'
  ]);
  

  3. Then I added below html in one of my views.

  <ul>
      <li dir-paginate="user in vm.users | itemsPerPage: 5">{{ user.userName }}</li>
  </ul>
  <dir-pagination-controls></dir-pagination-controls>
  

  When vm.users array contains more than 5 elements, pagination is displayed and worked for me.

  Please send your project to <a href="mailto:[email protected]">[email protected]</a> if this does not work for you.

  Save Cancel