無法訪問指令中的範圍屬性

我試圖訪問我的指令中的$ 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 
    } 
    }]);

會出現這種情況，因爲我在父範圍內變化不登記？

來源

2014-03-24 twillw

看來這只是因爲你沒有把東西分配給指令的範圍。 – EnigmaRM

你如何在html中使用指令？ – Yanis

@YanisT，你問的是一個新問題嗎？你應該把它發佈，而不是作爲一個評論捎帶別人的問題。您也可以轉到文檔或其他Angular教程來獲得解釋。 – EnigmaRM

我懷疑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); 

    }; 
})

來源

2014-03-24 14:41:46 EnigmaRM

對不起，我沒有指定問題實際上是從'imgSwitch'指令中訪問 – twillw

我認爲這是你自己的指令？如果是這樣的話，您需要在原始問題中發佈。這很大程度上改變了這個問題。你應該創建一個JSFiddle或者Plunker來展示你的問題。 – EnigmaRM

無法訪問指令中的範圍屬性

回答

相關問題