0

UPDATE: this is a duplicate of Call Angular JS from legacy code

I am implementing a new feature in an existing application using angular. I can't rewrite the entire app now so this means models in angular may need to be updated from the rest of the app, which manipulates the dom directly.

How can I update a model without deviating too much (or at all) from the design patterns inherent in the angular?

Here is a simplified working example, but it contains event handlers in the controller. Perhaps there is a better way.

NOTE: the button is imaginary. there is no such button in the application. Its for simplification.

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 option is to declare function for an external object inside of the controller:

NAMESPACE.someobject.loadSettings = function (data) {
     $scope.$apply(function(){
         $scope.settings = { audiostop: data.audiostop};
    });
}

UPDATE: it seems that what I need is to implement dependency injection as explained here : http://docs.angularjs.org/guide/di

Community
  • 1
  • 1
CodeToad
  • 4,656
  • 6
  • 41
  • 53
  • possible duplicate of [Call Angular JS from legacy code](http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-code) – CodeToad Jan 29 '14 at 13:04

1 Answers1

1

First of all, don't use $('button').click. In Angular, you can just add on click handler to button in HTML code, it will be cleaner.

As for updating settings - you can have settings Service, special class which will handle your settings. It is better to have service than adding function to scope because you can reuse the same service in different scopes and you don't need to pollute scopes with data related stuff.

Oleg Fedorov
  • 337
  • 3
  • 10
  • I am aware of this. thanks. $('button').click is being used in my example to show what I want to avoid doing. The button is for demo purposes and there is no such button in the actual app. it represents the part of the application that absolutely cannot be bound to angular at this time, but must interface with angular in some way. How do I configure a service that can let *non angular* js code to change the model? – CodeToad Jan 29 '14 at 12:39
  • I think simplest way in this case is to have service with .loadSettings function which does $scope.$apply and calls external non angular code inside. – Oleg Fedorov Jan 29 '14 at 12:49
  • and this service can be called from external non-angular code? – CodeToad Jan 29 '14 at 12:51
  • 1
    Sure: http://stackoverflow.com/questions/10490570/call-angular-js-from-legacy-code – Oleg Fedorov Jan 29 '14 at 12:56
  • That's exactly what I was looking for, thanks. I am marking my question as duplicate. – CodeToad Jan 29 '14 at 13:03