AngularJS - using a custom directive to 'emulate' Knockout 'with' binding - angularjs

Question

The topic title is extremely deceptive, but I could not think of a different way to briefly word this.
Actual Question
(tl;dr)
How can I create a part of the HTML where any expressions are in the immediate context of a given object, like this:
<div [i want to use $scope.user]>
{{ Name }} // this is really $scope.user.Name
{{ Joined }} // this is really $scope.user.Joined
{{ Email }} // this is really $scope.user.Email
</div>
Details
(long winded explanation of why I am lost)
I know that I can do this using a Controller, but from what I am grasping, that isn't what I should do. The tutorials I read all seem to accomplish this, but I'm still left pretty confused.
I know this is doable - and in fact quite normal, in angular. But essentially my goal is to take code like this ...
<div ng-repeat="item in Items">
{{ item.Name }}
{{ item.Price }}
</div>
And use it on a slightly more personal level on non-repeated code. I believe this would be a custom directive? I've been reading a lot of resources, and they're very useful, but I'm having a difficult time associating the relationship between the DOM and the options of the directive. I'll try hard to explain...
Assume I have a model like this;
{
Name: "Ciel",
Joined: "2014/7/30",
email: "emailaddress#domain.com"
}
My understanding is that I would actually wire this in the $scope part of my controller, so .. I think it would go like this?
(function(){
var app = angular.module("program", []);
app.controller("UserController", function($scope){
$scope.user = {
Name: "Ciel",
Joined: "2014/7/30",
Email: "emailaddress#domain.com"
};
});
})();
Now, if I am grasping it right, I should be able to create a directive? to actually use this fluently in my HTML, kind of like this ...
<div ng-model="user">
{{ Name }}
{{ Joined }}
{{ Email }}
</div>
But when I tried this out, I am getting a bit confused. Because this doesn't actually seem to do what I thought. I guess what I am really lost on is how we're using ng-model here. I thought it was more like knockout's with: user, so it would be more like this;
<div data-bind="with: user">
{{ Name }}
{{ Joined }}
{{ Email }}
</div>
But that isn't seeming to be the case. When I tried running this on my own, I seem to be required to do it like this..
<div>
{{ user.Name }}
{{ user.Joined }}
{{ user.Email }}
</div>
And ng-model doesn't even seem needed.

Answer 1

A directive! See fiddle: http://jsfiddle.net/8drZr/1/
app.directive('with', ['$parse', function($parse) {
return {
restrict: 'A',
scope: true,
link: function(scope, elem, attrs) {
var withContext = $parse(attrs['with'])(scope.$parent);
angular.extend(scope, withContext);
}
};
}]);
The trick is setting scope: true. It will create a new child scope so as not to pollute the parent and the directive places everything under the given "with" object in this new scope using angular.extend() (for those familiar with jQuery, same as $.extend()).
Now there is a limitation, as pointed out in the comments. Two way binding between top-level properties (*) will not occur. This is a known limitation of Angular and the prototypical inheritance of scopes.
(*) By top-level properties I mean bindings like <input ng-model="value" />; non-top-level would be <input ng-model="bar.value" />
A more complicated implementation can surmount this problem, at the cost of more watches. A naive first implementation can be seen here: http://jsfiddle.net/mxG5r/1/
It is naive because for( x in withContext ) will iterate over properties that may not be desirable to watch, e.g. functions/methods.