Question

我需要将我创建的服务的值传递给按钮模板并将其插入到我的index.html中。我想要一个可重用的代码来插入CRUD按钮。

目前，当我尝试插入没有ID，类和文字的按钮时，这就是它们看起来“活”的方式。

这就是我所拥有的：

索引：

<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>

我目前正在学习角度，所以我会继续阅读文档，但每次看一个答案时我都会提出更多问题。如果有一个更简单的选择，我愿意尝试它，因为它没有燃烧价值，因为它违背了这个运动的目的。

Answer 1

你犯了几个错误，我已经纠正了一些问题，请查看example。这是你想要的吗？

<强> 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);

Answer 2

在ButtonTemplate中，您使用了两个范围。一个来自控制器，一个来自指令。 Controller知道什么是buttons，指令知道什么是button和buttonIndex，但是这些之间没有任何联系。我建议你删除指令中的范围和来自控制器的模板使用变量（使用ng-repeat）：

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

将服务值传递给模板

2 个答案: