반응형
Jquery를 사용한 콜 각도 함수
텍스트 상자에 데이터가 있을 때 각도 함수를 어떻게 호출합니까?여기 내 코드가 있다.
html
<!DOCTYPE html!>
<html xmlns:ng="http://angularjs.org" data-ng-app="flightSearch" lang="en">
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div data-ng-controller="flightSearchController">
<input type="text" data-ng-model="query" data-ng-change="flightSearch()" placeholder="e.g RGN>MDL, KAW>RGN" id="targetTextField" />
<input id="options3" type="text" style="display:none;"/>
<select id="options">
<option value="From" selected>From</option>
<option value="RGN" ng-click="flightSearch()">RGN</option>
<option value="NYU" ng-click="flightSearch()">NYU</option>
<option value="MDL" ng-click="flightSearch()">MDl</option>
<option value="HEH" ng-click="flightSearch()">HEH</option>
</select>
<select id="options2">
<option value="To" selected>To</option>
<option value=">RGN" ng-click="flightSearch()">RGN</option>
<option value=">NYU" ng-click="flightSearch()">NYU</option>
<option value=">MDL" ng-click="flightSearch()">MDl</option>
<option value=">HEH" ng-click="flightSearch()">HEH</option>
</select>
<ul>
<li data-ng-repeat="route in filteredItems">
<div data-ng-bind-html="route.displayRoute"></div>
</li>
</ul>
</div>
</body>
js
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script type="text/javascript">
function buildPaths(route){
var points = route.split(">");
var paths = {};
for(var i = 0; i < points.length; i++){
var from = points[i];
for(var j = i; j < points.length; j++){
var to = points[j];
if (from != to){
if(paths[from + ">" + to]){
if(j-i < paths[from + ">" + to][0])
paths[from + ">" + to] = [j-i,points.slice(i,j+1).join(">")]
}else{
paths[from + ">" + to] = [j-i,points.slice(i,j+1).join(">")]
}
}
}//for j
}//for i
return paths;
}
var flightSearch = angular.module('flightSearch',['ngSanitize']);
flightSearch.controller('flightSearchController', function ($scope){
// Data definitions, route is actual data,
// display route is for higlight display purpose only.
var dataRoutes = [
{route: "RGN>NYU>MDL>HEH>RGN", displayRoute: "", paths: []},
{route: "RGN>HEH>KYT>THK>KYT>HEH>RGN", displayRoute: "", paths: []},
{route: "RGN>MDL>HEH>NYU>RGN", displayRoute: "", paths: []},
{route: "RGN>MDL>STW>RGN", displayRoute: "", paths: []},
{route: "RGN>NYU>MDL>MYT>PTO>MYT>MDL>NYU>RGN", displayRoute: "", paths: []},
{route: "RGN>HEH>NYU>MDL>RGN", displayRoute: "", paths: []},
{route: "RGN>TVY>MGU>KAW>MGU>TVY>RGN", displayRoute: "", paths: []},
{route: "RGN>TVY>KAW>TVY>RGN", displayRoute: "", paths: []},
{route: "RGN>KAW>MGU>TVY>RGN", displayRoute: "", paths: []}];
// Pre-calculate the possible path the shortest distance
for(var r = 0; r< dataRoutes.length; r++){
dataRoutes[r]["paths"] = buildPaths(dataRoutes[r]["route"]);
dataRoutes[r]["displayRoute"] = dataRoutes[r]["route"];
}
// Assign the routes. This is unfiltered origintal data (all)
$scope.routes = dataRoutes;
// This is filtered list for dispaly
$scope.filteredItems = $scope.routes;
// Search/filter function. This updates filteredItems list
$scope.flightSearch = function(){
if($scope.query.length > 6){
$scope.filteredItems = [];
for(var index in $scope.routes){
$scope.routes[index]["displayRoute"] = $scope.routes[index]["route"];
if($scope.routes[index]["paths"][$scope.query] !== undefined){
var match = $scope.routes[index]["paths"][$scope.query][1];$scope.query
$scope.routes[index]["displayRoute"] = $scope.routes[index]["route"].replace(match,"<b>" + match + "</b>");
$scope.filteredItems.push($scope.routes[index]);
}
}
}else{
for(var r = 0; r< $scope.routes.length; r++){
$scope.routes[r]["displayRoute"] = $scope.routes[r]["route"];
}
$scope.filteredItems = $scope.routes;
}
}
});
flightSearch.filter("highlight",function(){
return function(text){
return text;
}
});
</script>
<script type="text/javascript">
$(function() {
$("#options").change(function(){
setTarget()
});
$("#options2").change(function(){
setTarget();
});
$("#options3").change(function(){
setTarget();
});
$("#targetTextField").change(function(){
setTarget();
});
});
function setTarget(){
var tmp = $("#options").val();
tmp += $("#options2").val();
tmp += $("#options3").val();
$('#targetTextField').val(tmp);
}
</script>
</html>
두 개의 선택 옵션 텍스트 상자에 데이터 삽입이 change.strong 텍스트에서 검색 기능을 호출할 경우
ng 컨트롤러와 같은 DOM 요소에 ID 태그가 연결되어 있는 경우 각도 요소의 범위에 액세스할 수 있습니다.
DOM:
<div id="mycontroller" ng-controller="mycontroller"></div>
컨트롤러:
function mycontroller($scope) {
$scope.myfunction = function() {
//do some stuff here
}
}
jquery에서 다음과 같이 하면 컨트롤러에 접속하여 해당 함수를 호출합니다.
angular.element('#mycontroller').scope().myfunction();
잊지 말고 전화하세요
angular.element('#mycontroller').scope().$apply()
범위 내의 함수 변수를 갱신하는 경우myfunction그렇지 않으면 동작하지 않습니다(@andersh 감사합니다).
코드에 이런 걸 쓰면
<div id="mycontroller" ng-controller="mycontroller as child"></div>
대신
<div id="mycontroller" ng-controller="mycontroller"></div>
접근은
angular.element('#mycontroller').scope().child.myFunction();
대신
angular.element('#mycontroller').scope().myFunction();
모든 경우에 있어서도 콜이 필요합니다.
angular.element('#mycontroller').scope().$apply();
컨트롤러의 스코프 요소에 액세스하기 위한
angular.element(document.getElementById('controllerId')).scope().scope_variable_array.push(item);
컨트롤러 기능에 액세스하기 위한
angular.element(document.getElementById('controllerId')).scope().function_name();
controllerId : HTML에서 ng-controller가 정의되는 태그 ID
다음과 같은 것을 사용합니다.
var $scope = angular.element($('[ng-controller]')).scope()
$scope 변수를 조작합니다.콘솔에서 체크인을 할 수 있습니다.
이 게시물을 참고하여 글로벌 객체에 함수를 할당합니다.window.
// In angularJS script
$scope.foo = function() {
console.log('test');
};
$window.angFoo = function() {
$scope.foo();
$scope.$apply();
};
// In jQuery
if (window.angFoo) {
window.angFoo();
}
저는 이 코드를 사용하여 잘 작동합니다.
var $scope = angular.element($('[ng-controller="MapCtrl"]')).scope();
@Ivan-San의 답변 덕분입니다.
각도(Angular)에 Jquery 코드를 입력할 수 있습니다.JS 컨트롤러와 같은
$scope.shipchange = function (SelectedShipId ) {
alert('ShipId =' + SelectedShipId );
}
$("#Ships").change(function () {
SelectedShipId = $("#Ships").val();
$scope.shipchange(SelectedShipId );
})
언급URL : https://stackoverflow.com/questions/18758997/call-angular-function-with-jquery
반응형
'programing' 카테고리의 다른 글
| JavaScript에서 ::(이중 콜론)은 무엇을 의미합니까? (0) | 2023.03.22 |
|---|---|
| 브라우저에서 런타임에 실행 중인 React 버전을 어떻게 알 수 있습니까? (0) | 2023.03.22 |
| 배열 필드가 비어 있지 않은 MongoDB 레코드 찾기 (0) | 2023.03.22 |
| JSON 정의되지 않은 값 유형 (0) | 2023.03.22 |
| Jquery .ajax를 사용하여 진행 중인 AJAX 요청을 취소하시겠습니까? (0) | 2023.03.22 |