Question

我试图访问控制器中指令返回的值。我尝试过服务。它不起作用;看起来控制器没有获取更新后的指令的返回值。

这是我的代码：

HTML

    <html ng-app="myApp">
    <body ng-controller="MainCtrl">
        <input type="file" file-reader="fileContent" />
        <div>{{fileContent}}</div>
     </body>
   </html>

控制器

 myApp.controller('MainCtrl', function($scope,sharedTrialService) {
    $scope.newValue = sharedTrialService.TrialInfo;  
    $scope.newData  = $scope.newValue.data; 
 });

指令

myApp.directive('fileReader', function(sharedTrialService) {
  return {
    scope: {
      fileReader:"="
    },
    link: function(scope, element) {
      $(element).on('change', function(changeEvent) {
        var files = changeEvent.target.files;
        if (files.length) {
          var r = new FileReader();
          r.onload = function(e) {
              var contents = e.target.result.replace(/\r\n|\r/g,'\n');

              scope.$apply(function () {
                var lines=contents.split('\n');


                scope.fileReader = lines;
                sharedTrialService.TrialInfo.data=scope.fileReader;
              });
          };
          r.readAsText(files[0]);
        }
      });
    }
  };

服务

 myApp .factory('sharedTrialService', function () {
       return {
                 TrialInfo: {
                 data: " "
                }
              };
    })
});

如何从我的控制器访问指令的sharedTrialService.TrialInfo.data？

Answer 1

使用$scope.newValue = sharedTrialService.TrialInfo.data;，您只需将字符串分配给newValue，但需要指定引用，因此需要分配对象或数组。因此，将其更改为$scope.newValue = sharedTrialService.TrialInfo;并通过newValue.data访问您的数据。

修改

在控制器中使用$watch进行调试：

$scope.$watch('newValue', function() { console.log('newValue:', $scope.newValue); }, true); $scope.$watch('newData', function() { console.log('newData:', $scope.newData); }, true);

我认为，$scope.newValue应该更改，因为它是对象引用，但$scope.newData只是一个字符串值，并且与上面说明的相同，它不会发生变化。因此，您始终需要通过$scope.newValue.data访问它。

从控制台

newValue: Object {data: " "} newData: newValue: Object {data: Array[6]}

$scope.newData无法更新，因为它仍然只是对该字符串值的引用。

在您的服务中，您定义字符串值" "，TrialInfo.data仅包含对该字符串值的引用。使用$scope.newData = $scope.newValue.data;，您可以将该引用复制到$scope.newData。在您的指令中，您将文件阅读器的引用复制到sharedTrialService.TrialInfo.data，但$scope.newData仍然引用该字符串值。 $scope.newData和TrialInfo.data包含不同的引用。

$scope.newValue包含对象TrialInfo的引用。您可以使用其属性执行所有操作，但对该对象的引用保持不变。因此，如果data属性发生了更改，您仍然可以通过$scope.newValue.data访问它。

也许我不是最好解释它。

使用服务访问控制器中的指令范围

HTML

控制器

指令

服务

1 个答案: