如何从AngularJS中获取变量并在javascript中使用它们?

时间:2016-03-31 11:24:21

标签: javascript angularjs cordova

我正在使用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");
            });

1 个答案:

答案 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);
}