I have seen these issues before and it is usually because of parameters, etc, but I have a very simple example that I can't get to work....
I have a directive:
.directive('imageFileInput', function () {
return {
restrict: 'A',
transclude: true,
templateUrl: '/assets/tpl/directives/imageFileInput.html',
scope: {
onComplete: "&imageFileInput"
},
link: function (scope, element, attr) {
// Get our input
var input = element.find("input");
// Function to handle the displaying of previews
var preview = function () {
// If we have an input
if (input) {
// Create our file reader
var fileReader = new FileReader();
// Get our file
var file = input[0].files[0];
// Read the data from the file
fileReader.readAsDataURL(file);
// When the data has been read
fileReader.onload = function (e) {
// Apply the scope
scope.$apply(function () {
// And attach the result to our scope
scope.thumbnail = e.target.result;
// If we have a callback function
if (scope.onComplete) {
// Execute the function
scope.onComplete();
}
});
};
}
};
// Bind a function to the onchange event
input.bind('change', function () {
// Create our preview
preview();
});
}
};
});
and the template looks like this:
<div class="thumbnail">
<input type="file" accept="image/*" />
<img src="{{ thumbnail }}" ng-if="thumbnail" />
<div class="caption" ng-transclude>
</div>
</div>
Pretty simple so far, it is just a directive that creates a nice preview for a file input. So the declaration of this directive is in my view like this:
<div id="{{ panel.id }}" image-file-input="controller.upload()">
{{ panel.title }}
</div>
and in my controller, I have this function:
.controller('EditKitGraphicsController', ['GarmentService', 'garment', function (garments, garment) {
var self = this;
// Get our garment
self.garment = garment;
self.upload = function () {
console.log('uploading');
};
}])
So, if I break this down:
Does anyone know why?
You have most likely forgotten to specify a "controller as" alias in ng-controller
:
<div ng-controller="EditKitGraphicsController as controller">
<div image-file-input="controller.upload()">
</div>
Also, there is no need to make this check:
if (scope.onComplete){
scope.onComplete();
}
In fact, scope.onComplete
will never be undefined
, since Angular creates a function call wrapper, even if the attribute is not assigned. You can safely make the call:
scope.onComplete();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.