As we already know that in Angular JS 2.0 $scope will be not available for further use. So, before we migrate to AngularJS 2.0 from current version, we need to understand how to develop directive or controller files without $scope. In my earlier article, I already discussed how to use page controller without $scope. Now, in this article I am going to discuss how to create directive without $scope. Since the main problem to develop an AngularJS directive without $scope is that we need to pass model value from main parent page to directive and vice versa. For this purpose, we can use bindToController in place of scope object in the directive. It is used for isolated scope. The sample structure for the directive is as in the following:

  1. scope: {},
  2. bindToController:
  3. {
  4. name: "="
  5. }
For doing the above sample, first we need to create a sample directive of AngularJS. For it, we will add a new JavaScript file named SampleDirective.js and add the following code:
  1. 'use strict';
  3. var testApp = angular.module('TestApp', []);
  5. testApp.directive('sampleDirective', ['$http', function ()
  6. {
  7. return
  8. {
  9. restrict: "E",
  10. scope: {},
  11. bindToController:
  12. {
  13. args: '='
  14. },
  15. template: '<div class="row">' +
  16. '<select class="form-control"' +
  17. 'data-ng-model="model.args.selectedItem"' +
  18. 'data-ng-options="item[model.args.displayField] for item in model.args.source"' +
  19. 'data-ng-change="model.itemChange(model.args.selectedItem)">' +
  20. '<option value="">Select Any Item</option>' +
  21. '</select>' +
  22. '</div>',
  23. controller: function ($http)
  24. {
  26. var self = this;
  28. var initializeControl = function ()
  29. {
  30. if (self.args == undefined)
  31. {
  32. self.args = {};
  33. }
  34. if (self.args.method == undefined)
  35. {
  36. self.args.method = {};
  37. }
  38. if (self.args.isDisabled == undefined)
  39. {
  40. self.args.isDisabled = false;
  41. }
  42. if (self.args.displayField == undefined)
  43. {
  44. self.args.displayField = '';
  45. alert('Display Field is blank for dropdown control.')
  46. }
  47. if (self.args.valueField == undefined)
  48. {
  49. self.args.valueField = '';
  50. alert('Value Field is blank for dropdown control.')
  51. }
  52. if (self.args.source == undefined)
  53. {
  54. self.args.source = {};
  55. }
  56. if (self.args.hide == undefined)
  57. {
  58. self.args.hide = false;
  59. }
  60. }
  62. var assignMethod = function ()
  63. {
  64. self.args.method =
  65. {
  66. setEnable: function (args) {
  67. self.args.isDisabled = !args;
  68. },
  69. setVisible: function (args)
  70. {
  71. self.args.hide = !args;
  72. },
  73. getText: function ()
  74. {
  75. return self.args.selectedText;
  76. },
  77. getValue: function () {
  78. return self.args.selectedValue;
  79. }
  80. }
  81. }
  83. self.itemChange = function (item)
  84. {
  85. if (item != undefined)
  86. {
  87. var index = self.args.source.indexOf(item);
  88. self.args.selectecText = item[self.args.displayField];
  89. self.args.selectecValue = item[self.args.valueField];
  90. self.args.selectedItem = item;
  91. self.args.selectedIndex = index;
  92. }
  93. }
  95. initializeControl();
  96. assignMethod();
  98. },
  99. controllerAs: 'model'
  100. }
  101. }]);
Now, we need to add html page named Index.html and add the following code:
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Without Scope Directive</title>
  5. <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
  6. <script src="../../Scripts/angular.min.js"></script>
  7. <script src="SampleDirective.js"></script>
  8. <script src="IndexController.js"></script>
  10. </head>
  11. <body data-ng-app="TestApp" data-ng-controller="IndexController as model">
  12. <div class="row animated fadeInRight">
  13. <div class="col-lg-12">
  14. <div class="rowDiv">
  15. <h3>{{model.message}}</h3>
  16. </div>
  17. </div>
  18. <div class="col-md-6">
  19. <div class="rowDiv">
  20. <sample-directive args="model.args"></sample-directive>
  21. </div>
  22. </div>
  23. <div class="col-md-3">
  24. <div class="rowDiv">
  25. {{model.args.selectecText}}
  26. </div>
  27. </div>
  28. <div class="col-md-3">
  29. <div class="rowDiv">
  30. {{model.args.selectecValue}}
  31. </div>
  32. </div>
  33. </div>
  34. </body>
  35. </html>
Now, add another JavaScript file for controller named indexController.js and add the following code :
  1. testApp.controller('IndexController', ['$http', function ($http, urlService)
  2. {
  3. var self = this;
  5. self.message = 'Directive Sample with out Scope';
  6. var dropData = [{ Id: 1, City: 'Kolkata', StudentName: 'Rajiv' },
  7. { Id: 2, City: 'New Delhi', StudentName: 'Swapan' },
  8. { Id: 3, City: 'Mumbai', StudentName: 'Nilesh' }];
  10. self.args = {
  11. displayField: 'StudentName',
  12. valueField: "Id",
  13. source: dropData,
  14. selectecText: '',
  15. selectecValue: ''
  16. };
  18. }]);
Here's the output after running the project: