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

【问题标题】：Accessing directive scope in controller using service使用服务访问控制器中的指令范围
【发布时间】：2016-04-26 06:00:15
【问题描述】：

我试图访问控制器中的指令返回的值。我尝试了一项服务。它不工作；似乎更新后的指令的返回值没有被控制器拾取。

这是我的代码：

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？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-service

【解决方案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 访问它。

也许我不是最好的解释。

【讨论】：

$scope.newValue 让我更新了对象，但 newValue.data 仍然为空
它的出现就像 $scope.trial 提供对象 {data: Array[0]} 和 $scope.trial.data []。我该怎么做才能从 $scope.trial 获取数组
在你的代码中，我看不到你在哪里调用类似r.readAsText(files[0]) 的东西，所以永远不会调用r.onload 并且永远不会设置sharedTrialService.TrialInfo.data。
感谢 Brakebein，我已经更新了代码，我可以看到控制器部分最初只运行一次，并且在指令赋予新值后它没有更新。你能告诉我我能做些什么吗
在调试控制器时，我只能看到 newValue 正在更新，当值更改时甚至不会触发 newData。我在调试时粘贴在控制台的输出上方。