AngularJSから変数を取得し、javascriptで変数を使用する方法は？

Question

Ionic & Cordovaで写真編集アプリを作成しています。オンラインでAngularJS変数を取得してJSで使用することができます。しかし、私はそれを試してみましたが、私は、コンソールにエラーを取得しています： app.js：1271キャッチされない例外TypeError：$（...）をスコープはここで機能

ではない私のコードは次のとおりです。

//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"); 
      }); 

Answer 1

あなたのjQueryリソースリファレンスがあなたのangualrjsリソース参照の後にあり、角スイッチが角度jqliteに切り替わり、したがってjQueryセレクタがわからない場合.scope()

私は以下の3つのjsfiddleを作成して、コンソールにエラーがあります：

Example1： - ：

<div id="myDiv" ng-controller="SecureController"> 
    <h1>{{pictureUrl}}</h1> 
</div> 

JS：いいえjQueryが何jqueryのは、あなたが角度jqliteに

HTMLを使用する必要が参照されていない場合

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のは、角の前に含まれています - 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： - ：

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

jQueryのangaular後に含まれているあなたは

HTML Uncaught TypeError: $(...).scope is not a functionエラーになります