0

What is the recommended approach for implementing the dot notation required by Angular models when your actual model does not have them?

My models are created on the server by Python/Django, the inputs required to edit certain properties often require a more advanced control than the standard HTML inputs. So I would obviously create a directive to perform these duties. The problem is that for directives to keep everything synced you must follow the "dot rule". So this would require you to set the isolated scope of your directive to an object that has a property. However, if the directive is created to work on a property not an object there is no dot notation for it to use.

What are the choices here?
To change the server code to return an unnecessary additional property to appease Angular?

Write a messy wrapper to watch the actual property and add that to an object so that Angular can keep track of it (and do the same in reverse to update the real property when the property of the wrapper object is changed)?

Or am I missing something obvious?

Thanks,

Paul

tRi11
  • 149
  • 8
  • you can pass the property to directive like `my-prop="abc.xyz"`, and that should be easy given you store serverside data like `$scope.abc = serverData;` – harishr Oct 13 '14 at 17:26
  • @HarishR - Thanks, but it's not the passing to the directive I'm struggling with, it's the two way binding once I've done that. So I have the isolated `scope: { myProp: '=' }` and pass it `my-prop="abc.xyz"` - in the directive `abc.xyz` is now `myProp` and Angular won't sync `myProp`, it needs to be, for example, `my.prop` – tRi11 Oct 13 '14 at 17:55
  • 1
    have you initialized `$scope.abc = {}` on the controller?? is `$scope.abc` defined, before being passed to directive? – harishr Oct 13 '14 at 18:06
  • @HarishR - not initially no, I retrieve the model from the server, so initially `scope.abc = undefined`. However, after the service retrieves the model then `scope.abc = {xyz: 'foo'}`. The directive will even correctly display the value of 'foo', however, when you change the value to 'bar', the Angular model is not updated, e.g. `xyz` still equals 'foo' (this can be confirmed by printing `scope.abc` to the console). The issue I'm trying to neatly solve is this one: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html – tRi11 Oct 13 '14 at 19:38
  • Can you try by initializing it on controller scope – harishr Oct 14 '14 at 02:32
  • @HarishR - This makes no difference. I think we're kind of straying from what I'm after here, this is not a specific problem I am having with a single bit of code (the reason I didn't include a code sample) but a recurring problem I often face (as do other Angular users) caused by JavaScripts prototypical inheritance. Here is another example of the problem I am trying to solve: http://stackoverflow.com/questions/17181907/angularjs-two-way-data-binding-in-nested-directives - the solution is simple, change the model to include a dot, but my question is, what other options are there? – tRi11 Oct 14 '14 at 11:17
  • thats the reason you should be "controller as" syntax – harishr Oct 14 '14 at 11:49
  • @HarishR - Thanks, the "controller as" syntax is new to me, another useful avenue opens. However, I'm not sure how it helps me here. If I load a JSON model from the server and render it in HTML with Angular, how will this help me get round situations where due to using certain Angular directives I cannot pass a custom directive a primitive value to work on? Changing the model to pass an object would prevent you from being able to save it back to the server as the model will have changed. I have found some other solutions here: https://github.com/angular/angular.js/wiki/Understanding-Scopes – tRi11 Oct 14 '14 at 12:42
  • controller as syntax is exactly what you are looking for, as per my experience with angular... check if that solved your problem. it will solve the dot problem in all cases – harishr Oct 14 '14 at 13:03

1 Answers1

1

you should use controller as syntax

         <div ng-controller="pageController as main">
                <input type="text" ng-model="main.abc">

         </div>
harishr
  • 17,807
  • 9
  • 78
  • 125
  • Thanks, maybe I'm being a bit slow here, but I still cannot see how this would help me. How would it solve the problem in the following Plunker: http://plnkr.co/edit/zZfUQN?p=preview (taken from AngularJS understanding scopes) - the first needs to work like the second while preserving the first model. – tRi11 Oct 14 '14 at 14:27