CODEWITHSUNDEEP
angularjsangularjs-directive
Code Grasshopper
Code Grasshopper

Reputation: 620

Pass service values to template

I need to pass values of a service I created to a button template and insert that into my index.html. I wanted to have a reusable code to insert CRUD buttons.

Currently when I try to insert the buttons they appear without id, class and text, this is how they look "live".

enter image description here

This is what I have:

Index:

<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="button.css">
</head>
<body>

  <div ng-view></div>

  <div buttons></div>

  <div class="container"><div>version <strong><span app-version></span></strong></div></div>


  <script src="components/buttons/buttons.js"></script>
  <script src="components/buttons/buttons-service.js"></script>
  <script src="components/buttons/buttons-directive.js"></script>
</body>
</html>

ButtonJS

'use strict';

angular.module('myApp.buttons', ['myApp.buttons.service','myApp.buttons.directive'])


.controller('BtnCtrl', ['$scope','buttonsService',function($scope,buttonsService) {
    $scope.buttons  = buttonsService.getButtons();
}]);

ButtonService

'use strict';

angular.module('myApp.buttons.service', [])

.service('buttonsService',function() {
  var buttons = [
               {type:"Add",color:"info"},
               {type:"Edit",color:"warning"},
               {type:"Delete",color:"danger"},             
              ];

  this.getButtons = function(){
      return buttons;
  };

});

ButtonDirective

'use strict';

angular.module('myApp.buttons.directive', [])

.directive('buttons', [function() {
    return {
        restrict: 'A',
        scope: {
            button: '=',
            buttonIndex: "="
        },
        templateUrl: 'templates/buttonTemplate.html'
    }
}]);

ButtonTemplate

        <div ng-controller="BtnCtrl" class="col-xs-12 text-center">
            <table class="table">
                <tr>
                    <td colspan="2">Actions</td>
                </tr>
                <tr>
                    <td >
<!--                    <button class="btn btn-lg btn-primary">Button</button> 
                        <button class="btn btn-lg btn-default">Button</button> -->
                        <button id="{{buttonIndex}}" class="btn btn-lg btn-{{button.color}}">{{button.type}}</button>
                        <button id="{{buttonIndex}}" class="btn btn-lg btn-{{button.color}}">{{button.type}}</button>
                        <button id="{{buttonIndex}}" class="btn btn-lg btn-{{button.color}}">{{button.type}}</button>
                    </td>

                </tr>
            </table>
        </div>

I am currently learning angular so I will keep reading the documentation, but each time I look one answer I end with more questions. If there is a simpler alternative I am open to try it, as long is not burning the values as it defeats the purpose of this excercise.

Upvotes: 0

Views: 332

Answers (2)

Slava Utesinov
Slava Utesinov

Reputation: 13488

You made several mistakes, I have corrected something, please look at this example. Is it what you want?

HTML:

<body ng-app="docsTransclusionDirective">
  <div ng-controller="BtnCtrl" class="col-xs-12 text-center">
      <div buttons='buttons'></div>      
  </div>
</body>

JavaScript:

(function(angular) {
  'use strict';
angular.module('docsTransclusionDirective', [])
.factory('myService', function() {
  var buttons = [
               {type:"Add",color:"info"},
               {type:"Edit",color:"warning"},
               {type:"Delete",color:"danger"},             
              ];

  return function(){
      return buttons;
  };
})
  .controller('BtnCtrl', ['$scope', 'myService', function($scope, myService) {
    $scope.buttons  = myService();
  }])
  .directive('buttons', function() {
    return {
      restrict: 'A',
      template: '<table class="table">'+
                "<tr ng-repeat='but in buttons'>"+
                    "<td><input id='{{$index}}' type='button' ng-value='but.type' class='btn btn-lg btn-{{but.color}}'/></td>"+
                '</tr>'+
            '</table>',
        scope: {
            buttons: '=',
        },
    };
  });

})(window.angular);

Upvotes: 2

Egan Wolf
Egan Wolf

Reputation: 3573

In your ButtonTemplate you use two scopes. One is from controller and one is from directive. Controller knows what is buttons, directive knows what are button and buttonIndex, but there is no connection between any of those. I suggest you to delete scope in directive and in template use variable from controller (with ng-repeat):

<td ng-repeat="button in buttons">
    <button id="{{$index}}" class="btn btn-lg btn-{{button.color}}">{{button.type}}</button>
</td>

Upvotes: 1

Related Questions