UPDATE: Found a similar question at Call Angular JS from legacy code
Working on adding a new feature to an existing application using Angular. Unable to do a complete rewrite, so the challenge is integrating Angular models with the rest of the app that directly manipulates the DOM.
How can I update a model in Angular without straying too far from its inherent design patterns?
Provided below is a simplified example with event handlers in the controller. Seeking possible improvements or alternative solutions.
NOTE: The button mentioned is not a part of the actual application. It's for illustration purposes only.
http://plnkr.co/edit/XoD6hPKs2ou3oqpuVhnQ?p=preview
JS:
var testApp = angular.module('testApp', []);
testApp.controller('audioController', function ($scope) {
$scope.settings = {audiostop: "00:30"};
$('button').click(function(){
$scope.loadSettings({audiostop: '23'});
});
$scope.loadSettings = function (data) {
$scope.$apply(function(){
$scope.settings = { audiostop: data.audiostop};
});
}
});
Another approach could be defining a function for an external object within the controller:
NAMESPACE.someobject.loadSettings = function (data) {
$scope.$apply(function(){
$scope.settings = { audiostop: data.audiostop};
});
}
UPDATE: Realized that implementing dependency injection might provide a solution, further details found here: http://docs.angularjs.org/guide/di