AngularJS "dot rule" with an existing JSON model

Question

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

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
– harishr, Commented Oct 13, 2014 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
– tRi11, Commented Oct 13, 2014 at 17:55
have you initialized $scope.abc = {} on the controller?? is $scope.abc defined, before being passed to directive? — harishr
– harishr, Commented Oct 13, 2014 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: jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html — tRi11
– tRi11, Commented Oct 13, 2014 at 19:38

harishr · Accepted Answer · 2014-10-14 13:05:08Z

1

you should use controller as syntax

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

         </div>

answered Oct 14, 2014 at 13:05

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tRi11 Over a year ago

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: plnkr.co/edit/zZfUQN?p=preview (taken from AngularJS understanding scopes) - the first needs to work like the second while preserving the first model.

Collectives™ on Stack Overflow

AngularJS "dot rule" with an existing JSON model

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related