Question

我正在尝试使用Angular和jQuery构建一个就地编辑功能。 jQuery执行DOM操作，Angular执行数据。

我的问题是如何从$ scope.updateString中调用jQuery函数resetString（）？

您可以在此处查看代码：

我有以下观点：

<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();

});

这是我的Angular应用程序。

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

这是我的jQuery：

{{1}}

}）;

Answer 1

不建议混合使用jQuery和AngularJS。但是，如果您愿意，可以将resetString分配给某个全局范围，例如

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

在AngularJS中你可以通过

调用resetString

window.myFunctions.resetString()

Answer 2

将您的resetString（）移出$（document）.ready以提供全局范围。

function resetString() {
  // to do resetting string code here
}

$(document).ready(function() {
   // you can call resetString() from here;
});

现在您也可以从角度控制器访问resetString（） -

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

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

从角度控制器调用jquery中的函数

2 个答案: