Question

我是AngularJS的新手，我有一个app（v 1.2.26），其中包含一个指令，用于在用户通过HTML文件输入选择文件时处理这些文件。该指令调用一个解析文件的服务，然后需要使用解析文件中的表格数据更新视图。除了更新视图外，所有这些都有效。

为了更新视图，我有一个控制器方法，我想从指令中调用。

第一个问题：这是用指令中的数据更新视图的好方法（即将数据传递给控制器）吗？

第二个问题（假设这是一种有效的方法）：使用以下代码调用控制器中的方法不起作用。我做错了什么？

应用模块：

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

控制器（与app模块位于同一文件中）：

app.controller('myCtrl', function($scope) {
  this.updatePanel = function(myData) {
    // this never gets called:
    console.log('you rang?');
  };
});

文件处理指令（在不同的文件中）：

angular.module('myApp')
.directive('fileBrowser', ['myDataService', function (myDataService) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    replace: true,
    template: '<div><div><input type="file" class="btn btn-default"/></div></div>',
    link: function (scope, element, attrs, ngModel) {
      var container = element.children();
      var bindFileControlChange = function () {
      // [snip] read the file (this works)
      //...

      // pass the file to the myDataService (this works):
      var myData = myDataService.parse(myFileContent);
      // call the controller method - this doesn't work:
      scope.$apply('updatePanel(myData)');
      //...
      };
     }
   };
 }
]);

感谢您的任何见解！

Answer 1

第一个问题：没错。如果您可以使用指令的控制器，那么维护包含表格数据的工厂可能会更加舒适。我知道我在制作文件浏览器指令时使用了链接，所以我怀疑这不适合你（但我不确定）。

第二个问题：使用您的示例，我认为您想要传递一个函数。为此，我建议使用隔离的范围变量，例如：

angular.module('myApp').directive('fileBrowser', ['myDataService', function (myDataService) {
    return {
        // ...
        scope: {
            updatePanel: "="
        },
        // ...
        link: function (scope, element, attrs, ngModel) {
            // ...
            scope.updatePanel(myData); // Call this whenever
            // ...
        }
    };
});

和html：

<div ng-controller="myCtrl">
    <file-browser update-panel="updatePanel"></file-browser>
</div>

如果符合您的需求，请告诉我。如果没有，我会尝试提出更好的答案。

AngularJS：从指令调用控制器中的方法，并传递参数

1 个答案: