Gerfried Gerfried - 1 year ago 44
AngularJS Question

$scope elements not visible outside of directive (using $scope:false)

I have a simple directive which uses the parent scope. However I cannot access the scope of the directive. What am I doing wrong?

<p>myFrm2.$name: {{myFrm2.$name}}</p>

<pane>
<form name="myFrm2" id="myFrm2">
<input type="text" ng-model="fld2">
</form>
</pane>


https://plnkr.co/edit/AIUK2tBiiVs21so2k5JR?p=preview

This is the directive:

.directive('pane', function() {
return {
restrict: 'E',
transclude: true,
scope: false,
template: '<div style="border: 1px solid black;">' +
'<div style="background-color: gray; color:white">Test Directive</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})


As I am setting $scope:false in my directive, I would suppose that the scope is shared between the directive and its parent scope.

Answer Source

Issue disappears when you use object models or controllerAs alias.

Example with object

in controller

  $scope.forms ={};

In view

<p>myFrm2.$name: {{forms.myFrm2.$name}}</p>

<pane>
  <form name="forms.myFrm2" id="myFrm2">
    <input type="text" ng-model="fld2">
  </form>
</pane>

Note that you should always use object in ng-model also

DEMO