각도 컨트롤러의 jquery에서 함수 호출

Question

각도 및 jQuery를 사용하여 편집 위치에서 함수를 작성하려고합니다. DOM 조작을 수행하는 jQuery이고 Angular가 데이터를 처리합니다.

내 질문은 어떻게 $ scope.updateString 내부에서 jQuery 함수 resetString()을 호출합니까?

현재 행동의 코드를 볼 수 있습니다

https://pigfox.com/angular

나는 다음과 같은보기가 있습니다

<div data-ng-app="Demo" data-ng-controller="cntrl"> 
      <div><input type="text" name="string" data-ng-model="string" class="form-control w300" placeholder="Enter string"/></div> 
      <div><input type="button" value="Submit" class="btn btn-primary" data-ng-click="insert();"/></div> 
      <div>{{msg}}</div> 
      <table id="strings"> 
       <thead> 
        <tr> 
         <th>ID</th> 
         <th>&nbsp;</th> 
         <th colspan="4">String<span class="small">(click to edit)</span></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr data-ng-repeat="row in data track by $index"> 
         <td>{{row.id}}</td> 
         <th>&nbsp;</th> 
         <td class="w100 string" id="string-{{row.id}}">{{row.string}}</td> 
         <td><button data-ng-click="deleteString(row.id);" class="btn btn-primary">Delete</button></td> 
         <td><button data-ng-click="updateString(row.id);" class="btn btn-primary save" id="save{{row.id}}">Save</button></td> 
         <td><button class="btn btn-primary reset_string" id="reset_string{{row.id}}">Reset</button></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

여기 내 각도의 앱을.

<script> 
var app = angular.module('Demo',[]); 

app.controller('cntrl', function($scope, $http){ 

    $scope.insert = function(){ 
     $http.post('/angular/insert', {string:$scope.string}) 
     .success(function(){ 
      $scope.msg="Data inserted"; 
      $scope.displayString(); 
     }) 
    } 

    $scope.displayString = function(){ 
     $http.get('/angular/all') 
     .success(function(data){ 
      $scope.data = data 
     }) 
    } 

    $scope.deleteString = function(id){ 
     $http.post('/angular/delete', {'id':id}) 
     .success(function(){ 
      $scope.msg = "Data Deleted"; 
      $scope.displayString(); 
     }) 
    } 

    $scope.updateString = function(id){ 
     $scope.newstring = $('#newstring').val(); 
     $http.post('/angular/update', {'id':id, 'string':$scope.newstring}) 
     .success(function(){ 
      $scope.msg = "Data Updated"; 
      $scope.displayString(); 
      resetString(); 
     }) 
    } 

    $scope.displayString(); 

}); 

그리고 여기 내 jQuery의 :

$(document).ready(function() { 

var string = ''; 
var raw_id = ''; 

$(document).on('click', '.string', function() { 
    if ($(this).attr('name') == 'newstring') 
     return false; 

    string = $(this).html(); 
    raw_id = this.id; 
    var td_id = this.id.split('-'); 
    var save = '#save' + td_id[1]; 
    $(save).show(); 
    var close = '#reset_string' + td_id[1]; 
    $(close).show(); 
    var input = '<input class="form-control w100 string" value="' + string + '" type="text" data-ng-model="newstring" name="newstring" id="newstring"/>'; 
    $(this).html(input); 
}); 

$(document).on('click', '.reset_string', function() { 
    resetString(); 
}); 

function resetString(){ 
    //reset <td> 
    var string_id_td = '#' + raw_id; 
    $(string_id_td).html(string); 

    //get the numerical id 
    var td_id = raw_id.split('-'); 

    //hide reset button 
    var reset_string = '#reset_string' + td_id[1];  
    $(reset_string).hide(); 

    //hide save button 
    var save = '#save' + td_id[1]; 
    $(save).hide(); 
} 

});

Answer 1

jQuery와 AngularJS를 혼합하는 것은 좋지 않습니다. 당신이 원하는 경우하지만 당신은 예를

window.myFunctions = {resetString: resetString}; // in jQuery 

에 대한 몇 가지 전역에 resetString을 할당 할 수 있으며, AngularJS와 내부 당신은 $ (문서)에서 당신의 resetString()을 이동

window.myFunctions.resetString() 

Answer 2

에 의해 resetString를 호출 할 수 있습니다. 글로벌 범위를 제공 할 준비가되었습니다.

app.controller('cntrl', function($scope, $http){ 

    $scope.updateString = function(id){ 
     resetString();  
    } 
});