Question

使用组件它看起来它不起作用，因为我想使用它像指令我将此plnkr http://plnkr.co/edit/I03kq05fZx2UkB4USHSZ?p=preview转换为我发布的现在我把组件放在app.js，你可以看到我调用myGrid但它没有显示结果它显示我一个注射器它不适合我可以有人帮助我

//in app.js
(function(){
    'use strict';
     angular.module('myGrid').component('myGrid', {
  bindings: {
    options: '='
  },
templateUrl : 'gridTemplate.html',
 controllerAs: 'vm',
 controller:function($scope,$element,$attrs) {
      var vm =this;
          

            var defaultColDef = [
                  {field: 'firstName'},
                  {field: 'lastName'},
                  {field: 'company'},
                  {field: 'employed'}
            ];
            
            vm.gridOptions = {
              data: vm.options.data, //private scoped from options : '=',
              columnDefs: vm.options.colDef || defaultColDef, // optional setting or default setting
              // ... some more default data
            };
          
      }
    })();
    
//in script.js
(function() {
    'use strict';
    angular.module('app', ['ui.grid','myGrid']);
    angular.module('app').controller('AllCtrl', AllCtrl);

    function AllCtrl() {
        var all = this;

        all.myData = [
            {
                "firstName": "Cox",
                "lastName": "Carney",
                "company": "Enormo",
                "employed": true
            },
            {
                "firstName": "Lorraine",
                "lastName": "Wise",
                "company": "Comveyer",
                "employed": false
            },
        ];
        
        all.myDataTwo = [
            {
                "firstName": "TEST",
                "lastName": "TEST",
                "company": "TEST",
                "employed": true
            },
            {
                "firstName": "TEST",
                "lastName": "TEST",
                "company": "TEST",
                "employed": false
            },
        ];

        all.firstOptions = {
            data: all.myData,
        };
        
        all.secondOptions = {
            data: all.myDataTwo,
            colDef: [
                  {field: 'firstName'},
                  {field: 'lastName'},
            ],
            // more distinct settings
        };
    }
    
   
})();

//in index.html
<html>
  <head>
    <link rel="styleSheet" href="style.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.css" />
    <script src="script.js"></script>
        <script src="app.js"></script>

  </head>
  <body ng-app="app" ng-controller="AllCtrl as all">
    <my-grid options="all.firstOptions" class="grid"></my-grid>
    <br>
    
    <my-grid options="all.secondOptions" class="grid"></my-grid>
  </body>
</html>

//in gridTemplate.html 
<div class="grid" ui-grid="gridOptions"></div>

如何将指令转换为组件

0 个答案: