Angularjs Binding 2 directives scope models to a parent controllers models

2
votes

I have a form controller with 2 object models model1:{name:"foo"} model2:{name:"model2"} I created 2 directives (both which create isolated scopes) . One with Element only binding which uses model1 and another one with Attribute only binding which uses model2.

The nesting is like so:

 <div myattibute="model2">
   <mytag my-model="model"></mytag>
 </div>

The attribute only directive doesn't have a template and the tag directive has a template.

The problem is that I am getting undefined in mytag directive for the model.

1.Can someone see the problem and explain it in the plnkr ?

http://plnkr.co/edit/Q23XqY?p=preview

Partial Solution: A working example with adding an empty div template with just ng-transclude for the myattribute directive makes it work. With i mandated that this attribute directive is on a div it that I would have wanted it to be placeable on any div, span etc. Here is the working example: http://plnkr.co/edit/z0M5ys?p=preview

2.How is ng-transclude affecting scope inheritance?
3.Can't I create this attribute with only business logic without any markup ?

1
javascriptangularjsangularjs-directive

1 Answers

1
votes

Isolate scopes are best avoided except for rare cases they add unnecessary complexity. It is much simpler to just use $scope.$watch to bind to expressions in attributes like this:

$scope.$watch(attrs.myModel, function(newValue, oldValue) {})

$scope.$watch(attrs.myattribute, function(newValue, oldValue) {})

This way your directives can either share the parent scope they were declared in and handle binding to it using $watch expressions, or they can create a child scope using { scope: true } if needed.

Here is one possible solution: http://plnkr.co/edit/mm2q67?p=preview

Keep in mind that your myTag directive can use an isolate scope if you'd really like to do it that way, but the myattribute one can't as that will break the scope inheritance chain for myTag