Question

我正在尝试访问我的指令中的$ scope.photoRes中的值，但截至目前，指令中的console.log（scope.photoRes）只显示一个空对象。控制台输出：

Object {fileName: "db372ec33603208781eb6fbf9789c816a4ab27d2.jpg", filePath: "C:\wamp\www\skittlize\photo_assets\uploads\db372ec33603208781eb6fbf9789c816a4ab27d2.jpg"} SkittlesCtrl.js:17
Object {} SkittlesCtrl.js:37

'use strict';

angular.module('skittlesApp')
  .controller('SkittlesCtrl', function ($scope, $location){
    $scope.photoRes = {};
    $scope.dropzoneConfig = {
      'options': { // passed into the Dropzone constructor
        'url': 'photo_assets/save2.php'
      },
      'eventHandlers': {
        'sending': function (file, xhr, formData) {
        },
        'success': function (file, response) {
          $scope.$apply(function () {
            $scope.photoRes = JSON.parse(file.xhr.getResponseHeader("photoInfo"));
            $location.path('/uploader')
            console.log($scope.photoRes);
          });
        }
      }
    };
  })
  .directive('dropzone', function () {
    return function (scope, element, attrs) {
      var config, dropzone;   
      config = scope[attrs.dropzone];   
      dropzone = new Dropzone(element[0], config.options);   
      _.each(config.eventHandlers, function (handler, event) {
        dropzone.on(event, handler);
      });
    };
  })
  .directive('imgSwitch', ['PhotoServ', function (PhotoServ) {
    function link(scope, element, attrs) {
      scope.$watch('photoRes', function (newVal) {
        if (newVal) {
          console.log(scope.photoRes);
          var cropper = new CROP();
          cropper.init('.selfie-container');
          cropper.loadImg('/uploads/'+scope.photoRes.fileName);
          $('.cropButton').on('click', function () {
            PhotoServ.skittlize('/uploads/'+scope.photoRes.fileName);
          });
        }
      });
    };
    return {
      link: link
    }
  }]);

是否发生了这种情况，因为我父母范围内的更改未注册？

Answer 1

我怀疑scope[attrs.dropzone]是否有效。我没有看到你在指令中指定scope的任何地方。

有两种不同的方法可以解决这个问题。一种是将它作为一个属性传递（你可能已经在做了，但我不知道你的HTML是什么样的。）

<div dropzone photoRes="{{photoRes}}"> </div>

然后，您只需致电attrs.photoRes即可获取该值。

另一种选择是在指令中分配范围。您使用@，=或&最有可能@可供您使用。如果我没记错的话，@会从属性中获取值。因此，您仍需要传递$scope作为属性。

另一方面，

=将与$scope对象绑定，并创建双向数据绑定。这可能是你不需要的。

.directive('dropzone', function() {
    return {
        restrict: "A",
        scope: {
            photoRes: "@",

        },
        link: function(scope, element, attrs ) {
            console.log(attrs.photoRes);
            console.log(scope.photoRes);

    };
})

无法访问指令中的scope属性

1 个答案: