角度コントローラからjqueryで関数を呼び出す

Question

Angularと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();  
    } 
});