Javascript 如何在jQuery事件触发的角度组件内调用函数？_Javascript_Jquery_Angularjs

Javascript 如何在jQuery事件触发的角度组件内调用函数？

javascript jquery angularjs

Javascript 如何在jQuery事件触发的角度组件内调用函数？,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我有一个使用jQuery（FineUploader）的第三方组件。当上传文档时，它会在javascript/jquery中触发一个事件，此时我需要从我的Angle组件之外的jquery代码中调用Angle组件内部的函数 angular按钮按预期工作，但我无法让jQuery按钮成功调用该函数 HTML页面 <!DOCTYPE html> <html> <head> <script data-require="angular.js@1.5.8" da

我有一个使用jQuery（FineUploader）的第三方组件。当上传文档时，它会在javascript/jquery中触发一个事件，此时我需要从我的Angle组件之外的jquery代码中调用Angle组件内部的函数

angular按钮按预期工作，但我无法让jQuery按钮成功调用该函数

HTML页面

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    function widgetController() {
      var model = this;
      model.addWidget = function(text) {
        alert(text);
      }
    }

    var app = angular.module("app", []);

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: [widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app">
    <widget></widget>
  </div>
</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;

  <button id="addJquery">Add widget using jQuery</button>

</center>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      model.addWidget("JQUERY WORKED!!");  //I need to be able to call the Angular function from jQuery
    });
  });
</script>

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    var externalWidget;

    function widgetController($scope, WidgetFactory) {
      var model = this;
      model.factory = WidgetFactory;

      model.addWidget = function(text, isUpdatedExternally) {
        model.isUpdated = text;
        var newWidget = text;
        model.factory.widgets.push(newWidget);
        if(isUpdatedExternally)
        {
          $scope.$apply();
        }
        console.log("updated!");
      }
      model.checkWidget = function() {
        console.log(model.isUpdated);
      }

      model.isUpdated = "NOT UPDATED";
      model.addWidget("Controller initialized Widget");

      externalWidget = model;
      console.log(externalWidget);
    }


    var app = angular.module("app", []);

     app.factory('WidgetFactory', function () {
       var widgetList = [];
       var initialWidget = "Factory Initialized Widget";
       widgetList.push(initialWidget);

            return {
                widgets: widgetList
            };
        });

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: ["$scope", "WidgetFactory", widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app" id="ngApp">
    <widget></widget>
    <br />
    <center><button id="addJquery">Add widget using jQuery</button></center>
  </div>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      externalWidget.addWidget("JQUERY WORKED!!!", true);
    });
  });
</script>

</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;
  <button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button> &nbsp;&nbsp;&nbsp;


</center>

<ul>
<li ng-repeat="w in model.factory.widgets">
  {{w}}
</li>
</ul>


函数widgetController（）{
var模型=此；
model.addWidget=函数（文本）{
警报（文本）；
}
}
var-app=angular.module（“app”，[]）；
app.component（“小部件”{
templateUrl:“template.html”，
controllerAs：“模型”，
控制器：[widgetController]
});

模板页面

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    function widgetController() {
      var model = this;
      model.addWidget = function(text) {
        alert(text);
      }
    }

    var app = angular.module("app", []);

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: [widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app">
    <widget></widget>
  </div>
</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;

  <button id="addJquery">Add widget using jQuery</button>

</center>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      model.addWidget("JQUERY WORKED!!");  //I need to be able to call the Angular function from jQuery
    });
  });
</script>

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    var externalWidget;

    function widgetController($scope, WidgetFactory) {
      var model = this;
      model.factory = WidgetFactory;

      model.addWidget = function(text, isUpdatedExternally) {
        model.isUpdated = text;
        var newWidget = text;
        model.factory.widgets.push(newWidget);
        if(isUpdatedExternally)
        {
          $scope.$apply();
        }
        console.log("updated!");
      }
      model.checkWidget = function() {
        console.log(model.isUpdated);
      }

      model.isUpdated = "NOT UPDATED";
      model.addWidget("Controller initialized Widget");

      externalWidget = model;
      console.log(externalWidget);
    }


    var app = angular.module("app", []);

     app.factory('WidgetFactory', function () {
       var widgetList = [];
       var initialWidget = "Factory Initialized Widget";
       widgetList.push(initialWidget);

            return {
                widgets: widgetList
            };
        });

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: ["$scope", "WidgetFactory", widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app" id="ngApp">
    <widget></widget>
    <br />
    <center><button id="addJquery">Add widget using jQuery</button></center>
  </div>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      externalWidget.addWidget("JQUERY WORKED!!!", true);
    });
  });
</script>

</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;
  <button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button> &nbsp;&nbsp;&nbsp;


</center>

<ul>
<li ng-repeat="w in model.factory.widgets">
  {{w}}
</li>
</ul>


下面的jQuery按钮是一个表示无法更改的第三方组件的按钮，它使用jQuery事件
使用Angular添加小部件
使用jQuery添加小部件
$（函数（）{
//这是模拟来自第三方组件的事件。
$（“#addJquery”）。在（“单击”，函数（）{
model.addWidget（“JQUERY工作！！”）；//我需要能够从JQUERY调用角度函数
});
});

我认为这可能成功了，但我不确定是否有更好的答案。如果有更好的解决方案，请发布替代方案

HTML页面

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    function widgetController() {
      var model = this;
      model.addWidget = function(text) {
        alert(text);
      }
    }

    var app = angular.module("app", []);

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: [widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app">
    <widget></widget>
  </div>
</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;

  <button id="addJquery">Add widget using jQuery</button>

</center>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      model.addWidget("JQUERY WORKED!!");  //I need to be able to call the Angular function from jQuery
    });
  });
</script>

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    var externalWidget;

    function widgetController($scope, WidgetFactory) {
      var model = this;
      model.factory = WidgetFactory;

      model.addWidget = function(text, isUpdatedExternally) {
        model.isUpdated = text;
        var newWidget = text;
        model.factory.widgets.push(newWidget);
        if(isUpdatedExternally)
        {
          $scope.$apply();
        }
        console.log("updated!");
      }
      model.checkWidget = function() {
        console.log(model.isUpdated);
      }

      model.isUpdated = "NOT UPDATED";
      model.addWidget("Controller initialized Widget");

      externalWidget = model;
      console.log(externalWidget);
    }


    var app = angular.module("app", []);

     app.factory('WidgetFactory', function () {
       var widgetList = [];
       var initialWidget = "Factory Initialized Widget";
       widgetList.push(initialWidget);

            return {
                widgets: widgetList
            };
        });

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: ["$scope", "WidgetFactory", widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app" id="ngApp">
    <widget></widget>
    <br />
    <center><button id="addJquery">Add widget using jQuery</button></center>
  </div>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      externalWidget.addWidget("JQUERY WORKED!!!", true);
    });
  });
</script>

</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;
  <button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button> &nbsp;&nbsp;&nbsp;


</center>

<ul>
<li ng-repeat="w in model.factory.widgets">
  {{w}}
</li>
</ul>


var-externalWidget；
函数widgetController（$scope，WidgetFactory）{
var模型=此；
model.factory=WidgetFactory；
model.addWidget=函数（文本，外部更新）{
model.isUpdated=文本；
var newWidget=文本；
model.factory.widgets.push（newWidget）；
如果（外部更新）
{
$scope.$apply（）；
}
日志（“更新！”）；
}
model.checkWidget=函数（）{
console.log（model.isUpdated）；
}
model.isUpdated=“未更新”；
addWidget（“控制器初始化小部件”）；
externalWidget=模型；
log（externalWidget）；
}
var-app=angular.module（“app”，[]）；
应用程序工厂（'WidgetFactory'，函数（）{
var widgetList=[]；
var initialWidget=“工厂初始化的小部件”；
推送（initialWidget）；
返回{
widgets:widgetList
};
});
app.component（“小部件”{
templateUrl:“template.html”，
controllerAs：“模型”，
控制器：[“$scope”，“WidgetFactory”，widgetController]
});


使用jQuery添加小部件
$（函数（）{
//这是模拟来自第三方组件的事件。
$（“#addJquery”）。在（“单击”，函数（）{
addWidget（“JQUERY工作！！！”，true）；
});
});

模板页面

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    function widgetController() {
      var model = this;
      model.addWidget = function(text) {
        alert(text);
      }
    }

    var app = angular.module("app", []);

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: [widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app">
    <widget></widget>
  </div>
</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;

  <button id="addJquery">Add widget using jQuery</button>

</center>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      model.addWidget("JQUERY WORKED!!");  //I need to be able to call the Angular function from jQuery
    });
  });
</script>

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

  <script>
    var externalWidget;

    function widgetController($scope, WidgetFactory) {
      var model = this;
      model.factory = WidgetFactory;

      model.addWidget = function(text, isUpdatedExternally) {
        model.isUpdated = text;
        var newWidget = text;
        model.factory.widgets.push(newWidget);
        if(isUpdatedExternally)
        {
          $scope.$apply();
        }
        console.log("updated!");
      }
      model.checkWidget = function() {
        console.log(model.isUpdated);
      }

      model.isUpdated = "NOT UPDATED";
      model.addWidget("Controller initialized Widget");

      externalWidget = model;
      console.log(externalWidget);
    }


    var app = angular.module("app", []);

     app.factory('WidgetFactory', function () {
       var widgetList = [];
       var initialWidget = "Factory Initialized Widget";
       widgetList.push(initialWidget);

            return {
                widgets: widgetList
            };
        });

    app.component("widget", {
      templateUrl: "template.html",
      controllerAs: "model",
      controller: ["$scope", "WidgetFactory", widgetController]
    });

  </script>

</head>

<body>
  <div ng-app="app" id="ngApp">
    <widget></widget>
    <br />
    <center><button id="addJquery">Add widget using jQuery</button></center>
  </div>

<script>
  $(function() {
    //This is mocking up an event from the third-party component.
    $("#addJquery").on("click", function(){
      externalWidget.addWidget("JQUERY WORKED!!!", true);
    });
  });
</script>

</body>

</html>

<center>

  <p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p>

  <button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> &nbsp;&nbsp;&nbsp;
  <button id="checkAngular" ng-click='model.checkWidget()'>Check widget using Angular</button> &nbsp;&nbsp;&nbsp;


</center>

<ul>
<li ng-repeat="w in model.factory.widgets">
  {{w}}
</li>
</ul>


下面的jQuery按钮是一个表示无法更改的第三方组件的按钮，它使用jQuery事件
使用Angular添加小部件
使用Angular检查小部件


{{w}