How To Call A Function Inside An Angular Component Triggered By Jquery Events?
I have a third-party component that using jQuery (FineUploader). When a document gets uploaded, it fires an event in javascript/jquery and I need to, at that point, call a functio
Solution 1:
I think this may have done the trick but I'm not sure if there is a better answer. Please post an alternate solution if there is a better one.
HTML Page
<!DOCTYPE html><html><head><scriptdata-require="angular.js@1.5.8"data-semver="1.5.8"src="https://code.angularjs.org/1.5.8/angular.js"></script><scriptdata-require="jquery@1.11.3"data-semver="1.11.3"src="https://code.jquery.com/jquery-1.11.3.js"></script><linkhref="style.css" /><scriptsrc="script.js"></script><script>var externalWidget;
functionwidgetController($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><divng-app="app"id="ngApp"><widget></widget><br /><center><buttonid="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>Template Page
<center><p>The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.</p><buttonid="addAngular"ng-click='model.addWidget("ANGULAR WORKED!!")'>Add widget using Angular</button> <buttonid="checkAngular"ng-click='model.checkWidget()'>Check widget using Angular</button> </center><ul><ling-repeat="w in model.factory.widgets">
{{w}}
</li></ul>
Post a Comment for "How To Call A Function Inside An Angular Component Triggered By Jquery Events?"