来自角度控制器的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();  
    } 
});