Gerfried Gerfried - 4 months ago 13
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

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

Comments