我正在使用Ionic& amp;创建一个照片编辑应用程序。科尔多瓦。我在网上读到可以获得AngularJS变量并在JS中使用它们。但我尝试了它,我在控制台中收到错误: app.js:1271 Uncaught TypeError:$(...)。scope不是函数
这是我的代码:
//Loading the variable from AngularJS
window.onload = function() {
var sources = {
yoda: $('[ng-controller="SecureController"]').scope().pictureUrl
};
loadImages(sources, initStage);
};
//Using ngCordova to capture the image and set the image link to $scope.pictureUrl. *This part works*
$cordovaCamera.getPicture(options)
.then(function(imageData) {
syncArray.$add({image: imageData});
$scope.pictureUrl= 'data:image/jpeg:base64,' + data
.then(function() {
alert("Image has been uploaded");
});
答案 0 :(得分:1)
如果你的jQuery资源引用在你的angualrjs资源引用之后,你会得到这个错误,angular会切换到angular jqlite,因此jQuery选择器不知道.scope()
我创建了以下三个jsfiddles来演示,示例3将在控制台中出现错误:
Example1:没有Jquery - 如果没有引用jquery,你必须使用angular jqlite
HTML:
<div id="myDiv" ng-controller="SecureController">
<h1>{{pictureUrl}}</h1>
</div>
JS:
var myApp = angular.module('application', []);
myApp.controller('SecureController', ['$scope', function($scope) {
$scope.pictureUrl = 'this is a test url';
}]);
window.onload = function() {
var sources = {
yoda: angular.element(document.getElementById('myDiv')).scope().pictureUrl
};
console.log(sources.yoda);
alert(sources.yoda);
}
Example2:jQuery包含在angular之前 - 使用jQuery选择器
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div id="myDiv" ng-controller="SecureController">
<h1>{{pictureUrl}}</h1>
</div>
JS:
var myApp = angular.module('application', []);
myApp.controller('SecureController', ['$scope', function($scope) {
$scope.pictureUrl = 'this is a test url';
}]);
window.onload = function() {
var sources = {
yoda: $('#myDiv').scope().pictureUrl
};
console.log(sources.yoda);
alert(sources.yoda);
}
Example3:jau包含在angaular之后 - 您将收到Uncaught TypeError: $(...).scope is not a function
错误
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="myDiv" ng-controller="SecureController">
<h1>{{pictureUrl}}</h1>
</div>
JS:
var myApp = angular.module('application', []);
myApp.controller('SecureController', ['$scope', function($scope) {
$scope.pictureUrl = 'this is a test url';
}]);
window.onload = function() {
var sources = {
yoda: $('#myDiv').scope().pictureUrl
};
console.log(sources.yoda);
alert(sources.yoda);
}