我们可以将一个js文件中的控制器数据传递到另一个js文件吗？ （angularJS）

Question

我正在使用javascript创建一个表。我有一个js文件，其中我有一个带有json数据的控制器（json数据由宽度，高度，颜色等组成......）。我有另一个javascript文件，我在其中创建了一个表。

AngularJS文件（例如）：

var myApp = angular.module("myApp", []);
myApp.controller("data",function($scope){ $scope.details = [{
       "width":"400px", "height":"500px"
    }];
});

这是我的表格的js文件（例如）：

var table = document.createElement("table");
for(var i=0;i<5;i++){
    var tr = document.createElement("tr");
    for(var j=0;j<5;j++){ 
        var td = document.createElement("td");
        tr.appendChild(td);
    }
    table.appendChild(tr);
}

现在，我的问题是如何将控制器的数据从该js文件传递到创建js文件的表。因为仅使用该数据，我正在设置高度，宽度等等。

例如：table.style.width = $ scope.data.width;

有没有办法将数据从一个js传递到另一个js文件？

Answer 1

如果要为对象设置内联样式，可以在表格内使用角度控制器而不使用其他javascript文件。

此外，如果您希望它只在您需要时出现，您可以使用＆＃34; ng-show＆＃34;或＆＃34; ng-if＆＃34; （只是不要同时使用它们）。

就像这样：<table ng-show="myCondition" style="width: {{table.width}}; height: {{table.height}}; color: {{table.color}}" >

table 是您的规范对象。

在控制器内部，它看起来像这样：

angular.module('myapp').controller('myTableController',  function($scope){  

     $scope.table = { 
         width: 100px, 
         height: 100px, 
         color: blue 
         /*... Other specifications*/ 
     };

 });

这是我认为你想要的一个工作片段，它的 非常基本的 但是要点到这一点：

＆＃13;

＆＃13;

var app = angular.module('test', []);


var controller = function($scope){
  
  //initializing our table specification object
  $scope.table = {  
    
    width: '300px',
    height: '50px',
    color: 'blue'  
  };
  
};

app.controller('myCtrl', controller);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">  
  <!-- Here goes your styling! -->
  <div ng-controller="myCtrl" ng-init="show=true">
    <hr>
    <h4>Current table data: </h4>
    {{table}}
    <hr>
  
  Width: <input type="text" ng-model="table.width" placeholder="Input your width here in pixels"/><br><br>
  Height: <input type="text" ng-model="table.height" placeholder="Input your height here in pixels"/><br><br>
  Color: <input type="text" ng-model="table.color" placeholder="Input your color here (eg. black, #ffffff )"/>
    &nbsp;Show? <input type="checkbox" ng-click="show = !show" checked/>
  
  <hr>
  <table ng-if="show" border="1" style="width: {{table.width}}; height: {{table.height}}; color: {{table.color}}">
    <tbody>      
      <tr>
        <td>My Content1</td>
        <td>My Content2</td>
      </tr>      
      <tr>
        <td>My Content1</td>
        <td>My Content2</td>
      </tr>          
    </tbody>
    </table>
    </div>
    
</div>

＆＃13;

＆＃13;

＆＃13;