來自角度控制器的jQuery中的調用函數

Question

我正在嘗試使用Angular和jQuery構建一個地方編輯功能。 這是jQuery的DOM操作和Angular做的數據。

我的quertion是如何從$ 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混合使用。但是，如果你想要做的，你可以指定resetString一些全球範圍內，例如

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

和內部AngularJS可以通過

window.myFunctions.resetString() 

Answer 2

調用resetString將您resetString（）從$（文件）。準備提供一個全球範圍。

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

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