Javascript 访问指令中的作用域属性时出现问题
我试图在指令中访问$scope.photoRes中的值,但目前指令中的console.log(scope.photoRes)仅显示一个空对象。 控制台的输出:Javascript 访问指令中的作用域属性时出现问题,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我试图在指令中访问$scope.photoRes中的值,但目前指令中的console.log(scope.photoRes)仅显示一个空对象。 控制台的输出: Object {fileName: "db372ec33603208781eb6fbf9789c816a4ab27d2.jpg", filePath: "C:\wamp\www\skittlize\photo_assets\uploads\db372ec33603208781eb6fbf9789c816a4ab27d2.jpg"} Ski
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
}
}]);
发生这种情况是因为我在父作用域中的更改未注册吗?我怀疑
作用域[attrs.dropzone]
是否有效。我看不到您在指令中分配范围的任何地方
有两种不同的方法来解决这个问题。一种是将其作为属性传递(您可能已经在这样做了,但我不知道您的HTML是什么样子)
这似乎只是因为你们并没有把东西分配给指令的范围。你们如何在html中使用指令?@YanisT,这是你们要问的一个新问题吗?你可能应该把它贴出来,而不是贴在别人的问题上。您也可以查阅文档或其他Angle教程进行解释。对不起,我没有指定问题实际上是从imgSwitch
指令内部访问的。我假设这是您自己的指令?如果是这样的话,你需要在你的原始问题中发布。这大大改变了这个问题。然后,您可能应该创建一个JSFiddle或Plunker来演示您的问题。
<div dropzone photoRes="{{photoRes}}"> </div>
.directive('dropzone', function() {
return {
restrict: "A",
scope: {
photoRes: "@",
},
link: function(scope, element, attrs ) {
console.log(attrs.photoRes);
console.log(scope.photoRes);
};
})