当我尝试加载ng cropper指令时,我收到TypeError: Cannot read property 'bind' of undefined.
,该指令是cropper javascript图像裁剪库的角度绑定。我不完全确定什么代码可能与显示最相关,但这是指令的上半部分:
angular.module('ngCropper', ['ng'])
.directive('ngCropper', ['$q', '$parse', function($q, $parse) {
return {
restrict: 'A',
scope: {
options: '=ngCropperOptions',
proxy: '=ngCropperProxy', // Optional.
showEvent: '=ngCropperShow',
hideEvent: '=ngCropperHide'
},
link: function(scope, element, atts) {
var shown = false;
scope.$on(scope.showEvent, function() {
if (shown) return;
shown = true;
preprocess(scope.options, element[0])
.then(function(options) {
debugger;
setProxy(element);
element.cropper(options);
})
});
function setProxy(element) {
if (!scope.proxy) return;
var setter = $parse(scope.proxy).assign;
setter(scope.$parent, element.cropper.bind(element));
}
该错误在setProxy()
函数的setter(scope.$parent, element.cropper.bind(element));
行引发。
这是因为cropper
在元素变量上显然是未定义的。是什么原因造成的?我不是角度指令方面的专家,但我想如果标签设置成这样,它应该可以解决吗?
奇怪的是,它在演示应用程序中确实解决得很好,而我的代码反映了相同的设置!我唯一的猜测是,我可能正在使用的另一个模块可能会干扰?我不愿意把它们都拿出来,但归根结底可能是这样。
我的模块声明为:angular.module('app', [
'ui.router',
'ngMessages',
'ngSanitize',
'LocalStorageModule',
'angular.filter',
'flow',
'ng-sortable',
'focus-if',
'ngCropper',
'controllers', 'services', 'directives', 'filters'])
我提到这个演示是为了尽我所能-https://github.com/koorgoo/ngCropper/tree/master/demo
我想,
- "巴珀"应该在什么基础上解决?(所以我知道该检查什么)
- 你能看到我的代码有什么明显的问题吗
在加载依赖项时需要保持精确的顺序,jQuery应该在AngularJS和其他内容之前先加载,如示例HTML所示。
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/cropper/dist/cropper.js"></script>
<link href="../bower_components/cropper/dist/cropper.css" rel="stylesheet">
<script src="../ngCropper.js"></script>